Javascript 如何按顺序淡入淡出

我希望以规则间隔依次对div执行

fadeIn

和

fadeOut

效果。我尝试使用以下代码，但它将一次全部div

fadeIn

和

fadeOut

HTML

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

更新

首先我想让div从屏幕上一个一个的消失。当所有的div都消失了，然后一个接一个的显示。这应该定期发生

---

我想您应该在jQuery上使用函数next，就像这样，我刚刚在JSFIDLE上的代码片段中写了forking：

在上面的代码中，我还使用$el来定义谁将成为下一个元素：

function fade( el, timer ){
el.fadeOut( timer , function() {
    $( this ).fadeIn( timer , function() {
        fade( $( this ).next(), timer ) ;
    } ) ;
} ) ;
}

var timer = 1000 ;

//run function
fade( $( "div:first-child" ), 1000 ) ;

---

尝试这样做，如果是这样，让我知道它是否有效！注意

一种可靠的方法是在递归循环中使用jQuery动画队列和延迟对象。此方法的优点是可以轻松地将动画添加到淡入淡出功能中。它也比一堆嵌套回调更容易阅读

// Get all the div elements
var divs = $('div');

/**
 * Fade in a specific indexed div element
 * @param {integer} i
 * @return {object} $.promise
 */
function fade(i)
{
    return divs.eq(i)
        .fadeIn(3000)
        .delay(6000)
        .fadeOut(3000)
        .promise();
}

/**
 * Recursive sequence runner
 * @param {integer} i
 */
function runSequence(i) {
    // If i is null/false set it to 0
    i = ! i ? 0 : i;

    // Run animation on item i
    var promise = fade(i);

    // Use the promise to queue up the next item
    // by calling this function again when the
    // animation is complete
    promise.then(function() {
        if (i > divs.length) {
            i = 0;
        }

        runSequence(++i);
    });
}

// Run the sequence for the first time
runSequence();

---

有不同的方法按顺序执行延迟操作。这里有一篇关于这方面的好文章

根据评论和您后来定义的需求，您可以这样解决它，并使用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);

---

这里有一些很好的答案，但为了增加多样性，这里有另一种方法，即好的淡入淡出：

请注意 Stackoverflow在代码片段中包含第三方脚本的方法干扰了这个示例，因此我不得不在其他div周围添加一个容器div。有关更纯粹的示例，请参见

函数淡入淡出（）{
var thisObj=此；
thisObj.out=功能（el，定时器）{
el.fadeOut（定时器，函数（）{
如果（$（this.prev（）.length>0）{
thisObj.out（$（this.prev（），计时器）；
}否则{
thisObj.in（$（“#container”）.find（“div:first child”），计时器；
}
} ) ;        
}  
thisObj.in=功能（el，定时器）{
el.fadeIn（计时器，函数（）{
if（$（this）.next（）.length>0）{
thisObj.in（$（this.next（），计时器）；
}否则{
thisObj.out（$（“#容器”）.find（“div:last child”），计时器）；
}
} );       
}     
}
new fade（）.out（$（“#container”）.find（“div:last child”），1000
#容器分区{
背景：#00f；
高度：50px；
宽度：50px；
保证金：5px；
浮动：左；
}
像这样的吗？还是这个？：-）不，在你的代码组里，位置改变了。这不应该发生。首先所有div一个接一个地消失，然后一个接一个地出现在屏幕上。或者我更新了你的小提琴：。您可以在淡出/淡出功能内完成转换后立即执行功能。
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);