如何均匀地计时衰落过渡？

Question

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

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.

把下一个动画放在那里，他们也有一个complete（回调）函数。

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

Answer 2

你需要用 javascript 正确地完成它。简单的方法在最后一个元素之后失败。

所以这是我的解决方案。是否可以进一步改进，我认为是的..但它现在确实有效。并且在某种程度上是面向未来的。

我清理了 css 并稍微更改了 html 结构。

演示： http://jsfiddle.net/8kgc0chq/3/

$(document).ready(function () {
    $(window).resize(function () {
        realTimeHeight();
    });
    realTimeHeight();
    startSlides();
});


function startSlides() {
    var fadeTime = 1000,
        delay = 1300,
        i = 0,
        slides = $("#hero-slider > .slide"),
        len = slides.length;

    slides.hide();

    var pF = $('<div class="slide">'), pB = pF.clone();
    pF.attr('id', slides.eq(i).attr('id'));
    $('#hero-slider').prepend(pF).prepend(pB);
    setInterval(fadeThisIn, fadeTime + delay);

    function fadeThisIn() {
        pB.attr('id', pF.attr('id'));
        i = ++i % len;
        pF.hide().attr('id', slides.eq(i).attr('id')).fadeIn(fadeTime);
    }
}

function realTimeHeight() {
    var altura = $(window).height();
    $("#hero-slider").css("height", altura);
}

如何均匀地计时衰落过渡？

How to evenly time fading transitions?

javascript

jquery

callback

setinterval

fade