如何在下一个内容淡入之前让第一个内容完全淡出？

Question

我不知道如何让第一个内容在下一个内容淡入之前完全淡出。这是一个 js 小提琴，您将看到“内容 2”框在“内容 1”框消失之前淡入完全出来。有没有办法让“内容 1”在“内容 2”淡入之前完全淡出，然后“内容 3”？

http://jsfiddle.net/m2Sm7/1/

感谢您的帮助！

这里也是 JS：

function startSlider(){ 

// timer 
var loop = 0; 

// get total boxes 
var count=$('.count .company').length; 

// slide index 
var sliderIndex = 0; 

// info boxes 
var infoboxes = $("#about_cont").find(".count"); 

function resetSlider() { 
    window.clearInterval(loop); 
    moveSlider(); 
    loop=window.setInterval(moveSlider, 2000); 
} 

function moveSlider() { 
    if(sliderIndex == count){ //will reset to first image when last image fades out 
        sliderIndex = 0; 
    } 
    infoboxes.fadeOut(1000); 
    infoboxes.eq(sliderIndex).fadeIn(1000); // slider image + the next image in the slider 

    sliderIndex++; 
} 

resetSlider(); 
} 

$(function() { 
    startSlider(); 
});

Answer 1

您可以使用回调来做到这一点。

infoboxes.fadeOut(1000, function() {
    infoboxes.eq(sliderIndex).fadeIn(1000);
});

来自他们的文档：

回调函数

如果提供，则在动画完成后触发回调。这对于将不同的动画按顺序串在一起很有用。回调没有发送任何参数，但它被设置为动画的 DOM 元素。如果为多个元素设置动画，请务必注意，每个匹配的元素都会执行一次回调，而不是对整个动画执行一次。

More info here.

更新：http://jsfiddle.net/m2Sm7/6/

我像这样重写了你的间隔：

var cur = infoboxes.first(), first = cur;
cur.fadeIn();
var interval = setInterval(function() {
    var next = cur.next();
    if (!(next.length > 0)) {
        next = first;
    }
    
    cur.stop(true, true).fadeOut(1000, function() {
        next.fadeIn(500);
    });
    
    cur = next;
    if (++count >= 50) {
        clearInterval(interval);
    }
}, 2000);