Unendliche Schleife, um ein Div zu verblassen, um div darunter zu offenbaren

Question

Ich habe zwei Divs, die absolut positioniert sind, um aufeinander zu sitzen. Ich versuche nur, eine einfache jQuery-Funktion zu erstellen, die das div oben (.group-fcallout-b) wegblendet, um das darunter liegende (.group-fcallout-a) zu enthüllen.

Hier ist meine JS:

$(document).ready(function() { 
    InfiniteRotator(); 
}); 

function InfiniteRotator() { 

    var fadeO = setInterval(function() { 
    $('.group-fcallout-b').fadeOut(500); 
    }, 5000); 

    clearInterval(InfiniteRotator); 

    var fadeI = setInterval(function() { 
    $('.group-fcallout-b').fadeIn(500); 
    }, 5000); 
} 

Ich denke, die Frage, die ich im Moment habe, ist, dass fadeIn beginnt unmittelbar nach fadeOut beendet hat - offensichtlich ich eine Verzögerung zwischen den beiden Funktionen will.

JSFiddle-Link: https://jsfiddle.net/02xLjh1y/11/

Vielen Dank!

Answer 1

Es ist eigentlich ein Motto:

setInterval(function(){ $('.group-fcallout-b').fadeToggle(500); }, 5000) 

fiddle aktualisiert

Answer 2

Ist das für Sie richtig? See this fiddle

Ich habe den Wert des Timeout in der zweiten geändert.

var fadeO = setInterval(function() { 
    $('.group-fcallout-b').fadeOut(500); 
    }, 5000); 

    clearInterval(InfiniteRotator); 

    var fadeI = setInterval(function() { 
    $('.group-fcallout-b').fadeIn(500); 
    }, 10000); 

Answer 3

Wie wäre es mit ? Hier

$(document).ready(function() { 

    InfiniteRotator(); 

}); 

function InfiniteRotator() { 
    var flag = 1; 

    var fadeOut = function() { 
     $('.group-fcallout-b').fadeOut(500); 
     flag = 0; 
    } 

    var fadeIn = function() { 
     $('.group-fcallout-b').fadeIn(500); 
     flag = 1; 
    } 

    var timer = setInterval(function(){ 
     if(flag) 
      fadeOut(); 
     else 
      fadeIn(); 
    }, 5000); 
} 

Answer 4

ist ein Weg, um zu erreichen, was ich denke, ist Ihr Ziel (fiddle here):

$(document).ready(function() { 
    InfiniteRotator(jQuery.fn.fadeOut, jQuery.fn.fadeIn); 
}); 

function InfiniteRotator(fadeFunc, callback) { 
    fadeFunc.call($('.group-fcallout-b'), 500, function() { 
     setTimeout(function() { InfiniteRotator(callback, fadeFunc); }, 1000); 
    }); 
} 

[Edit: hat ein Timeout vor dem anderen Weg Schwund zurück]

Da sowohl fadeIn und fadeOut nehmen ein optionales Callback-Argument, das Sie ausnutzen können, anstatt setInterval zu verwenden.

N.B. Ich weiß nicht, ob Sie interessiert sind oder nicht, aber die Verwendung eines Großbuchstaben 'I' in InfiniteRotator ist ein wenig ungewöhnlich - normalerweise würde der Großbuchstabe bedeuten, dass dies eine Konstruktorfunktion ist, was nicht der Fall ist.