如何均勻消除衰落過渡？

Question

所以我試圖創建一個簡單的幻燈片放映從頭開始，到目前爲止我能夠獲得全屏幕圖像淡出和褪色在infinetly，但由於一些奇怪的原因使用setInterval(function(){fade(var)}, 3500);沒有工作，也許有人可以解釋爲什麼第一張和最後一張圖像花費超過3.5秒纔會消失。同時，我試圖通過在fade()中實現回調函數來解決該問題。我的例子有四個圖像，它們開始淡出，直到它到達圖像1，然後不會淡出圖像1，並開始在圖像2中淡出，直到圖像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：

的函數調用一次在動畫完成。

將下一個動畫放在那裏，它們也取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); 
}