Как равномерно затухающие переходы?

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/ не работает tho.

Answer 1

Вот документ для .fadeOut()

Существует дополнительный аргумент complete:

Функция вызываемая после завершения анимации.

Включите следующую анимацию, они также выполняют функцию complete (callback).

$("#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); 
}