嘗試淡入淡出setTimeout的文本時遇到問題

Question

我一直在想辦法淡出和淡化我的功能。 我還是javascript的新手，所以我真的想不起其他方法。 我的代碼仍然很難刷新，即使我添加了淡入淡出，所以我正在尋求幫助。 謝謝

var words = [
"Aaron",
"John",
"Megan"
];

index = 0;
function wordslide(){
    setTimeout(function(){
        $('.title-case:eq(0)').html('<div class="img-title">'+words[index]+'</div>').fadeIn();
    });
    index++;
    if (index == words.length) { index = 0}
        setTimeout(wordslide, 2000);
}
wordslide();

Answer 1

元素在創建時完全可見。 嘗試在.fadeIn() .hide()之前添加.fadeIn() ，這應該使名稱被淡化。

$('.title-case:eq(0)').html('<div class="img-title">'+words[index]+'</div>').hide().fadeIn();

Answer 2

它看起來像而不是setTimeout，你要找的是Interval 。 這可能有助於清除代碼的一些復雜性。

之后，就像Tschitsch建議的那樣在fadeIn之前調用hide或fadeOut。

使用setInterval我們可以將您的函數重寫為：

 var words = [ "Aaron", "John", "Megan" ]; index = 0; var myWordFadeInterval = setInterval(function(){ wordslide(); }, 2000); function wordslide(){ $('.title-case:eq(0)').html('<div class="img-title">'+words[index]+'</div>.fadeOut(1000).fadeIn(1000)'); index++; if (index == words.length) index = 0 } //when you want to stop your interval call: //clearInterval(myWordFadeInterval); 

fadeIn / fadeOut的第一個參數是時間更多信息