2

我有以下代码：

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

有没有一种简单的方法可以循环浏览每个报价，所以显示报价 1，然后淡出显示报价 2！等还是我需要使用插件？

4

4 回答 4

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

现场演示

于 2012-05-18T09:03:19.227 回答
0
  1. 将 Q2、Q3 等的可见性保持为“隐藏”。
  2. 延迟显示第一个报价的时间，然后在回调时，您可以切换第一个和第二个报价的可见性。在此回调中为流程重复延迟和回调。
于 2012-05-18T09:05:53.717 回答
0 
 $('#quotes').find('p').hide();   

 $('#quotes').find('p').each(function(i){
        $(this).prev().fadeOut('slow');
        $(this).fadeIn('slow');
    });
于 2012-05-18T09:05:57.457 回答
0

另一种选择是使用插件。jQuery 循环插件非常棒，而且设置起来超级简单：

它变成了一个班轮： $('#quotes').cycle()

演示：http: //jsfiddle.net/lucuma/HsWrC/1/

循环插件：http: //jquery.malsup.com/cycle/

参考（控制时间、动画类型等）：http: //jquery.malsup.com/cycle/options.html

于 2012-05-18T13:06:22.437 回答