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

元素在创建时完全可见。尝试在.hide()之前添加.fadeIn()，这会使名称淡入。

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

Answer 2

您正在寻找的是set Interval而不是setTimeout。这可能有助于清除代码的某些复杂性。

之后，只需像tschitsch建议的那样在fadingIn之前调用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的第一个参数是时间more info

尝试淡入和淡出setTimeout文本时遇到麻烦

2 个答案: