jQuery Verkettung funktioniert nicht wie erwartet

Es ist einfach zu verketten Konzept in jQuery aber folgende Verkettung in jQuery führt nicht zum gewünschten Ergebnis. Warum macht es Schriftfarbe blau auf Knopfdruck statt rot und dann blau (kettenweise) ??jQuery Verkettung funktioniert nicht wie erwartet

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     $("button").click(function(){ 
     // The following code should make the text-color as red 
     // and then perform the other chaining function, 
     //  but its not making it red, instead it makes it blue on button click. 
      $("#p1").css("color", "red") 
        .slideUp(2000) 
        .slideDown(2000) 
        .css("color", "blue") 
        .slideUp(2000) 
        .slideDown(2000); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <p id="p1">jQuery is fun!!</p> 
    <button>Click me</button> 
</body> 
</html>

Die obige jQuery-Code, den Text-Farbe als rot machen sollte und dann die andere Verkettungs Funktion ausführen, aber es ist nicht das rot machen, sondern macht es auf den Knopf klicken blau.

Quelle

2016-04-19 Sohail

Nest 'slideXX' nennt. – Tushar

Sie müssen die Callback-Funktionen der Folie nach oben und nach unten verwenden, wenn Sie die CSS nach dem Abschluss der Animationen ändern möchten - zB 'slideDown (200, function() {$ (this) .css (" color "," color ") blau ")})' – Pete

JS Kommentare wäre hier passender – alex

Sie können Callbacks verwenden, um nach Abschluss einer Animation Code auszuführen. Ansonsten wird jQuery alles sofort machen. Chaining funktioniert nicht wie eine Warteschlange.

$("button").click(function(){ 
 
    $("#p1").css("color", "red") 
 
    .slideUp(2000) 
 
    .slideDown(2000, function(){ 
 
    \t $(this).css("color", "blue"); 
 
    }) 
 
    .slideUp(2000) 
 
    .slideDown(2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="p1">jQuery is fun!!</p> 
 
<button>Click me</button>

Quelle

2016-04-19 15:28:46

Ich würde die zweite Slide-Up und Down innerhalb der ersten Rückruf zurück – Pete

@Pete Das ist ein sehr guter Punkt und warum es so gut ist, dass wir andere Antworten hier haben. Ich tendiere dazu, die Antworten, die ich poste, so nahe wie möglich am ursprünglichen Code zu halten. Ich habe das immer gemacht und ich weiß nicht, ob es der beste Ansatz ist, aber es gibt auch andere Antworten, die ergänzen und bessere Praktiken zeigen können. –

Sie müssen die Rückrufe von den Animationsfunktionen nutzen sonst die Effekte sofort ausgeführt werden, statt, nachdem die Animation abgeschlossen ist. Versuchen Sie folgendes:

$("button").click(function() { 
    $("#p1").css("color", "red").slideUp(2000, function() { 
     $(this).css("color", "blue").slideDown(2000, function() { 
      $(this).slideUp(2000, function() { 
       $(this).slideDown(2000); 
      }); 
     }); 
    }); 
});

Working example

Wenn Sie eine Menge von verketteten Animationen kann es um die Verwendung queues lohnt suchen in sein.

Quelle

2016-04-19 15:28:52

Du bewerkstelligst dasselbe wie @Joseph Marikle, stellst aber stattdessen die Pyramide des Schicksals vor. – Seth

Oh, ich stimme völlig zu, dass das hässlich ist. Deshalb habe ich vorgeschlagen, Warteschlangen zu benutzen. –

Gotcha: thumbsup: – Seth

Sie müssen die verfügbaren Callback-Funktionen aus den slideUp() und slideDown() Funktionen nutzen jeweils als the documentation mentions:

Wenn geliefert, der Rückruf einmal gebrannt wird die Animation abgeschlossen ist. Dies kann nützlich sein, um verschiedene Animationen in der Sequenz aneinander zu reihen. Der Callback wird keine Argumente gesendet, aber das ist das DOM-Element wird animiert. Wenn mehrere Elemente animiert sind, ist es wichtig zu beachten, dass der Rückruf einmal pro übereinstimmendem Element ausgeführt wird, nicht einmal für die gesamte Animation.

Also Sie der "Chaining" Ansatz sieht schon etwas anders als Ihr ursprüngliches Beispiel:

$("#p1").css('color','red') 
     .slideUp(2000,function(){ 
      // When the first slide-up has completed, then slide down 
      $(this).slideDown(2000,function(){ 
        // After you have slid-down, change your color 
        $(this).css('color','blue'); 
        // Continue down the rabbit hole here... 
      }); 
     });

Arbeitsbeispiel

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function(){ 
 
     $("button").click(function(){ 
 
      $("#p1").css("color", "red") 
 
        .slideUp(2000, function(){ 
 
         $(this).slideDown(2000,function(){ 
 
         $(this).slideDown(2000).css("color", "blue"); 
 
         }) 
 
        }) 
 
      }); 
 
    }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <p id="p1">jQuery is fun!!</p> 
 
    <button>Click me</button> 
 
</body> 
 
</html>

Quelle

2016-04-19 15:29:57

jQuery Verkettungs führt einen Spaß aus ction nach dem anderen sofort, so dass die Textfarbe auf rot gesetzt wird, sind zwei Animationen in der Warteschlange und dann wird die Farbe auf blau gesetzt.

Da die Funktionen slideUp/slideDown ein Ereignis quittieren und nicht darauf warten, dass es abgeschlossen wird, finden die Textfarbenänderungen fast unmittelbar nacheinander statt.

Sie können wie so ein onComplete Zuhörer für die Dia-Funktionen eingestellt:

$("#p1").css("color", "red") 
    .slideUp(2000) 
    .slideDown(2000) 
    .slideUp(2000, function() { $(this).css("color", "blue"); }) 
    .slideDown(2000);

Nun wird Ihre Textfarbe blau gesetzt wird, nachdem die zweite slideUp Funktion beendet ist, anstatt nach der Warteschlange ist.

Quelle

2016-04-19 15:34:18 Vidalia

Wenn Sie fließen folgende erwarten sind - die Farbe wechseln zu rot - slide up - schieben nach unten - die Farbe wechseln zu blau - Folie nach oben - nach unten rutschen

dann sollten Sie Rückrufe von slideup bereitgestellt verwenden/Slidedown-Funktion & nest sie richtig, um gewünschte Effekte zu erhalten.

Sie so etwas wie

//change color to red 
$("#p1").css("color","red"); 
$("#p1").slideUp(2000, 
function(){ 
    $("#p1").slideDown(2000, 
    function(){ 
     $("#p1").css("color","blue") 
     //dotimeoutifyouwanthere 
     $("#p1").slideUp(2000, 
     function(){ 
      $("#p1").slideDown(2000); 
     }) 
    }) 
})

Weitere Informationen tun können & Rückrufe über nisten überprüfen slideup, slideDown

Quelle

2016-04-19 15:34:37 biker

jQuery Verkettung funktioniert nicht wie erwartet

Antwort

Verwandte Themen