Beenden Sie eine Animation und starten Sie dann die andere

Question

Ich habe zwei divs und zwei separate Links, die slideDown und slideUp für die divs auslöst.

Wenn einer der divs runtergleitet und ich auf den anderen klicke, verstecke ich das erste div (slidingUp) und öffne dann das andere div (slidingDown), aber im Moment ist es so als würde ein div runterrutschen, der andere, ebenfalls zur gleichen Zeit, rutscht auf.

Gibt es einen Weg, der jQuery sagen würde, zu warten, um zu beenden, hinunter von einem div zu gleiten und erst dann zu beginnen, den anderen zu rutschen?

Answer 1

$('#Div1').slideDown('fast', function(){ 
    $('#Div2').slideUp('fast'); 
}); 

Edit: Habe ausgecheckt Sie das Akkordeon-Plugin (wenn das, was Sie versuchen zu tun)?

Answer 2

Die meisten jquery-Funktionen haben einen Callback-Parameter, in den Sie einfach eine Funktion einfügen können.

Answer 3

$("#thisDiv").slideUp("slow", function() { 
    // This function is called when the slideUp is done animating 
    $(this).doNextThing(); 
}); 

Answer 4

Verwenden Sie den zweiten Parameter der Funktion: Callback. Zum Beispiel

 
$(this).slideDown(speed, function(){ 
    $(this).slideUp(); 
}); 

Answer 5

können Sie einen Rückruf verwenden, um einen nächsten Effekt ausgelöst, wenn die ersten getan wird:

$("#element1").slideUp(
    "slow", 
    function(){ 
     $("#element2").slideDown("slow"); 
    } 
); 

die Funktion als zweites Argument der slideUp Methode definierte In diesem Beispiel wird aufgerufen, nachdem die slideUp Animation beendet ist.

Lesen Sie die Dokumentation: http://docs.jquery.com/Effects/slideUp

Answer 6

Sie sollten es die Kette wie diese

function animationStep1() 
{ 
    $('#yourDiv1').slideUp('normal', animationStep2); 
} 

function animationStep2() 
{ 
    $('#yourDiv2').slideDown('normal', animationStep3); 
} 

// etc 

Natürlich können Sie diese nach oben mit rekursiven Funktionen aufpeppen kann, Arrays Animation Warteschlangen halten, usw., nach Ihren Bedürfnissen.

Answer 7

ein Beispiel hierfür kann in JQuery for Beginners - Day 2

zu sehen gibt 15 Tage dieser Tutorials sind, und sie sind eine gute Ressource. Genießen!

Answer 8

Bit Ein sauberes Beispiel und mit einer Verzögerung zwischen der Animation:

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);