jQuery使用淡入淡出显示单词列表 [英] jquery show list of words using fade

问题描述

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

I am brand new to jquery but im hoping someone points me in right direction with this simple question, what's the best way to show a list of words 1 after another in my div ? for example in this simple code

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

我想依次显示三个单词，分别是北美，欧洲，亚洲各大洲，这样就可以了

I would like to show 3 words One after another which are the continents North America,Europe,Asia so it would go like this

北美(显示2秒钟，然后移至下一个)

North America (show for 2 seconds, then move to the next one)

欧洲(显示2秒钟，然后移到下一个)

Europe (show for 2 seconds, then move to the next one)

亚洲(显示2秒钟，然后再次从北美开始)

Asia (show for 2 seconds, then start with North America again)

推荐答案

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

You can use delayed animation. For example with a setup like this:

<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/刚刚显示.

Note: This code both shows and hides words, feel free to adjust animation as needed. E.g this one http://jsfiddle.net/DZ2uE/2/ just shows.

这篇关于jQuery使用淡入淡出显示单词列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！