在尝试淡入和淡出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

元素在创建时是完全可见的。尝试在.hide()之前添加.fadeIn()，这应该会使名称褪色。

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

Answer 2

看起来，您要寻找的不是setTimeout，而是设定间隔。这可能有助于清理代码的一些复杂性。

在此之后，只需调用hide或fadeOut，就像Tschitsch建议的那样，在fadeIn之前调用。

使用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的第一个参数是time 更多信息