Question

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

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

我想一个接一个地显示3个词，这些词是北美洲，欧洲，亚洲的大陆所以它会像这样出现

北美（显示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'));

Demo

Answer 2

这不是jquery相关的问题，而是一般的JavaScript逻辑问题

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

CodeBins Rotating Word

$(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/只是显示。

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

3 个答案: