Question

是否可以告诉我为什么我无法在以下代码中将.fadeIn()动画添加到.html()？

jQuery(function() {
  var i = 0;
  var text = ["Welcome", "Hi", "Sup dude"];

  setInterval(function() {
    $("#changeText").fadeIn(300).html(text[i]);
    i++;
    if (i >= text.length) {
      i = 0;
    }
  }, 2500)

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="changeText">This is For Test</div>

Answer 1

您必须在淡入文本之前隐藏文本。您还可以尝试淡出文本以使效果更好。

＆＃13;

jQuery(function() {
  var i = 0;
  var text = ["Welcome", "Hi", "Sup dude"];

  setInterval(function() {
    $("#changeText").hide().html(text[i]).fadeIn(300);
    i++;
    if (i >= text.length) {
      i = 0;
    }
  }, 2500)

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="changeText">This is For Test</div>

＆＃13;

Answer 2

正如其他人所说，你必须隐藏元素以淡入它。你可以简单地隐藏它，或者使用这里显示的方法，这是一个稍微好一点的转换：jQuery text fade/transition from one text to another?

要在代码中显示，请执行以下操作：

jQuery(function() {
    var changeInt = 0;
    var i = 0;
    var text = ["Welcome", "Hi", "Sup dude"];

    setInterval(function() {
        $("#changeText").fadeOut(function() {
            $(this).text(text[i])
        }).fadeIn();
        i++;
        if (i >= text.length) {
            i = 0;
        }
    }, 2500)
})

有关于将fadeIn（）添加到.html（）的问题

2 个答案: