使用jQuery一个接一个地切换DOM元素

时间:2012-05-18 09:00:35

标签: javascript jquery jquery-animate

我有以下代码:

<div id="quotes">
    <p>"Quote 1."</p>
    <p>"Quote2!"</p>
    <p>"Quote3"</p>
    <p>"Etc"</p>
</div>

是否有一种简单的方法可以循环显示每个报价,因此显示报价1然后淡出以显示quote2!等或我需要使用插件吗?

4 个答案:

答案 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();
});​

Live DEMO

答案 1 :(得分:0)

  1. 将Q2,Q3等的可见性保持为“隐藏”。
  2. 延迟您希望在回调时显示第一个报价的时间,您可以切换第一个和第二个报价的可见性。在流程的回调中重复延迟和回调。

答案 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