javascript - 如何依次淡入淡出

Question

我希望 fadeIn 和 fadeOut 对 div 以固定间隔顺序地一个接一个地产生影响。我尝试使用以下代码，但它会一次全部 div fadeIn 和 fadeOut。

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

jQuery

function fade()
{
   $("div").each(function(){
       $(this).fadeOut(3000);
   });
   $("div").each(function(){
       $(this).fadeIn(3000);
   });
}
setInterval(fade,6000);

更新

I want First of all div one by one disappear from screen. When all div disappear then one by one show. This should happen regular interval.

JS Fiddle

Answer 1

有多种方法可以按顺序执行延迟操作。这是一篇关于此的好文章 http://www.paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

根据评论和你后面定义的需求，可以这样解决，用fadeTo代替fadeIn/fadeOut

var start = $('div:first');

function fade(lobj){
    lobj.fadeTo('slow',lobj.css('opacity')==1 ? 0 : 1,function(){
        var nobj = lobj.next();
        if(nobj.length)
            fade(nobj);
        else
            fade(start);
    });
}

fade(start);

http://jsfiddle.net/sofl/1n30hp49/15/