Question

我有两个div。我希望一个接一个地展示。所以，第一次淡入，然后淡出，然后de第二次淡入，然后淡出。

$('[class^="flash"]').each(function(index) {
  $(this).fadeToggle();
});

<div class="flash-error">You have an error.</div>
<div class="flash-info">You may do this to avoid that error.</div>

效果是在同一时间进行的，而它应该是一个接一个。

我可以在这里推吗？

Answer 1

使用setTimeout并将其乘以索引值。将1000更改为您希望延迟的时间。请注意，第一个index值为0，因此0 * anything始终为0。如果您希望更改此默认行为，请index+1 * anything。

$('[class^="flash"]').each(function(index) {
    var $this = $(this);
    setTimeout(function(){
         $this.fadeToggle();
    }, index * 1000);
});

Here's the jsFiddle

修改

如果您希望第二个仅出现在第一个之后，它应该开始时不可见，因为您正在使用淡入淡出切换：

.flash-info{ display:none; }

Updated jsFiddle

Answer 2

您需要的所有内容： jsBin demo

$('[class^="flash"]').hide().each(function(index, elemenet){   
   $(elemenet).delay(i*2000).fadeTo(500,1, function(){
     $(this).delay(1000).fadeTo(500,0);
   });
});

时间逻辑：1000 + 500 + 500 = 2000
您可以在HTML中添加尽可能多的flash元素（请参阅演示）。

它们显示每个目标'[class^="flash"]'元素的一个又一个原因，我们在each()个参数中传递堆栈中当前元素的i（索引）值（0,1，如果你有两个元素）。比数学更简单：$(element).delay(i*2000)表示第一个将指定延迟0（0 * 2000 = 0），第二个元素将在出现原因1 * 2000（1 * 2000 = 2000）之前有2000个延迟）

Answer 3

<强>编辑：

你去：http://jsfiddle.net/jjH9W/3/

$('[class^="flash"]').hide()
$('[class^="flash"]').eq(0).fadeIn(2000,function(){
    $(this).fadeOut(2000);
});
setTimeout(function(){
    $('[class^="flash"]').eq(1).fadeIn(2000,function(){
        $(this).fadeOut(2000);
    });
},4000);

jquery如何堆叠/切换divs可见性？

3 个答案: