CSS 替换文本后动画不工作？

Question

对于我的网站，我正在尝试淡出单词的一部分，替换它，然后再淡入。我正在使用 animate.css 和 jquery 一起执行此操作。

HTML

      <h1>D<span id="span-header">iscover</span></h1>

JavaScript

$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
   var newText = $("#span-header").text().replace("iscover", "ispicio");
   $("#span-header").text(newText);
}, 700);
$("#span-header").addClass("animated fadeIn");

它正在做的是淡出并替换文本，但它不会淡入。我做错了什么？

Answer 1

1st：您需要将 .addClass("fadeIn") 的代码移入 setTimeout 回调函数

2nd：在添加fadeInclass[=16之前使用.removeClass('fadeOut')删除fadeOutclass =]

演示

$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
   var newText = $("#span-header").text().replace("iscover", "ispicio");
   $("#span-header").text(newText);
   $("#span-header").removeClass('fadeOut').addClass("fadeIn");
}, 700);

CSS 替换文本后动画不工作？

CSS animation not working after replacing text?

javascript

jquery

html

css

animate.css