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

第一：您需要在.addClass("fadeIn")回拨函数中移动setTimeout的代码

第二次：在添加.removeClass('fadeOut')类之前使用fadeOut删除fadeIn类

<强>演示

$("#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动画无法正常工作？

1 个答案: