jquery - jquery使用淡入淡出显示单词列表

Question

我是 jquery 的新手，但我希望有人用这个简单的问题为我指明正确的方向，在我的div中显示单词列表的最佳方法是 1 ？例如在这个简单的代码中

<div id="Mylist"> </div>

我想一个接一个地显示三个词，它们是北美大陆，欧洲，亚洲，所以它会像这样

北美（显示 2 秒，然后移至下一个）

欧洲（显示 2 秒，然后移至下一个）

亚洲（显示 2 秒，然后再次从北美开始）

Answer 1

假设：

<div id="mylist">
    <span>North America</span>
    <span>Europe </span>
    <span>Asia</span>
</div>

你可以试试：

function animate(el){


    el.fadeIn(function(){
        if(typeof el !== 'undefined') animate(el.next()); continue recursion only if there's a next sibling element
    });
}

animate($('#mylist').children(':first'));

演示

Answer 2

这不是与 jquery 相关的问题，而是一个通用的 JavaScript 逻辑问题

您需要将单词存储在某个数组中并使用 setInterval 2 秒间隔。在每个时间间隔，您只需要维护数组的正确索引。

CodeBins 旋转字

$(function() {
    var words = ["North America", "Europe", "Asia"];
    var totalWords = words.length;
    var currentWord = 0;
    var $myList = $("#Mylist")
    var showWord = function() {
            $myList.html(words[currentWord]);
            currentWord = (currentWord + 1) % totalWords;
        }
    setInterval(showWord, 2000);
    showWord();

})

Answer 3

您可以使用延迟动画。例如，使用这样的设置：

<div id="Mylist" > 
    <span>North America</span>
    <span>Europe</span>
    <span>Asia</span>
</div>

#Mylist span {
    display:none
}

您可以使用代码：

$("#Mylist span").each(function(i) {
    $(this).delay(i*2000).fadeIn(1000).fadeOut(1000)
})

演示：http: //jsfiddle.net/DZ2uE/1/

注意：此代码显示和隐藏文字，请根据需要随意调整动画。例如，这个http://jsfiddle.net/DZ2uE/2/只是显示。