我有以下代码:
<div id="quotes">
<p>"Quote 1."</p>
<p>"Quote2!"</p>
<p>"Quote3"</p>
<p>"Etc"</p>
</div>
是否有一种简单的方法可以循环显示每个报价,因此显示报价1然后淡出以显示quote2!等或我需要使用插件吗?
答案 0 :(得分:5)
$('#quotes p').each(function(index){
$(this).delay(index * 1000).fadeIn().fadeOut();
});
或类似的东西:
$('#quotes p').hide().each(function(index){
$(this).delay(index * 1600).fadeIn().delay(750).fadeOut();
});
答案 1 :(得分:0)
答案 2 :(得分:0)
$('#quotes').find('p').hide();
$('#quotes').find('p').each(function(i){
$(this).prev().fadeOut('slow');
$(this).fadeIn('slow');
});
答案 3 :(得分:0)
另一个选择是使用插件。 jQuery循环插件很棒,设置起来非常简单:
它成为一个班轮:$('#quotes').cycle()
演示:http://jsfiddle.net/lucuma/HsWrC/1/
循环插件:http://jquery.malsup.com/cycle/
参考(控制时间,动画类型等):http://jquery.malsup.com/cycle/options.html