javascript - 如何均匀地进行淡入淡出过渡？

Question

所以我试图从头开始创建一个简单的幻灯片放映，到目前为止我能够让全屏图像无限地淡出和淡入，但出于某种奇怪的原因使用 setInterval(function(){fade(var)}, 3500);不起作用，也许有人可以解释为什么第一张和最后一张图像花了超过 3.5 秒的时间才褪色。同时，我试图通过在fade()中实现回调函数来解决这个问题。 。我的示例有四个图像，它们开始淡出直到到达图像一，然后不要淡出图像一并开始淡入图像二直到图像4，并永远这样做，这是我最近尝试实现回调功能:

var i = 4;

$(document).ready(function(){
            fade(i, fade);
});

var fadeIN = false;
function fade(objectID, callbackfn){
    var fadeTime = 3500;
    if(!fadeIN){
        $("#slide-"+objectID).fadeOut(fadeTime);
        i--;
        if(i === 1) {
            fadeIN = true;
        }
    }
    else{
        i++;
        $("#slide-"+objectID).fadeIn(fadeTime);
        if(i === 4){
            fadeIN = false;
        }
    }
    if(arguments[1]){
        callbackfn(i);
    }
}

但这不起作用，它淡出图像 4、图像 3 并停止在图像 2 上。也许有一种方法可以使用 setIntervel() 均匀地计时淡入淡出过渡。 ，如果是这样，有人可以告诉我怎么做吗？感谢任何帮助。

这是代码的 JSFiddle:http://jsfiddle.net/8kgc0chq/但它不起作用。

Answer 1

这是 .fadeOut() 的文档

有一个可选参数complete:

A function to call once the animation is complete.

将下一个动画放在那里，它们也采用完整(回调)函数。

$("#id").fadeOut(fadeTime, function() {
    // code to execute after animation complete 
});