Ошибка при добавлении fadeIn() в .html()

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

Вы должны скрыть текст, прежде чем исчезнуть его. Вы также можете попытаться FADEOUT текст, чтобы сделать аффект лучше.

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) 
 

 
})

<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 2

Как уже отмечалось, у вас есть, чтобы скрыть элемент выцветает его можно просто скрыть его, или использовать метод, описанный здесь, который является немного лучше trannsition:. 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) 
})