jQuery ändern Sie die Farbe und den Text mehrmals nach .animate

Question

Das Problem ist, dass, wenn ich auf die Schaltfläche klicken, div sollte sich dreimal bewegen, und nach jeder Bewegung ändern Sie den Hintergrund und Text, aber wenn ich dies tun div ordnet nur die letzte CSS- und .html

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $(".square").animate({top: '250px'}); 
 
    $(".square").html("My friend"); 
 
    $(".square").css({ 
 
     backgroundColor: "#aa0000", 
 
     color: "white" 
 
    }); 
 
    //SECOND MOVE 
 
    $(".square").animate({left: '250px'}); 
 
    $(".square").css({ 
 
    backgroundColor: "yellow", 
 
    color: "white" 
 
    }); 
 
    $(".square").html("NO"); 
 
    //THIRD MOVE 
 
    $(".square").animate({top: '-10px'}); 
 
    $(".square").html("YESSSSSSSSSSSSSSS"); 
 
    //FOURTH MOVE 
 
    $(".square").animate({left: '-10px'}); 
 
    $(".square").css({ 
 
    backgroundColor: "Black", 
 
    color: "white" 
 
    }); 
 
    $(".square").html("NOO") 
 
});

<!-- Here's the html: --> 
 

 
<div id="content" class="wrapper box"> 
 
    <button id="button">Go</button> 
 
    <article> 
 
     <div class="square">Hello</div> 
 
     <div class="output"></div> 
 
    </article> 
 
    <input type="text" id="number"/> 
 
    <button onclick="calculate();">Check</button> 
 
    <button onclick="sortArray();">Input array</button></div>

Answer 1

Sie benötigen eine Funktion mit jedem Schritt auf Beseeltem komplette Ereignis wich hinzufügen löst nach jeder Animation endet.

See: jQuery .animate() complete function:

versuchen, etwas wie folgt aus:

$(document).ready(function() { 
 
    $("#button").click(function() { 
 

 
     $(".square").animate({top: '250px'}, 'slow', function() { 
 

 
      $(".square").html("My friend"); 
 
      $(".square").css({ 
 
       backgroundColor: "#aa0000", 
 
       color: "white" 
 
      }); 
 

 
      //SECOND MOVE 
 
      $(".square").animate({left: '250px'}, 'slow', function() { 
 
       $(".square").css({ 
 
        backgroundColor: "yellow", 
 
        color: "white" 
 
       }); 
 

 
       $(".square").html("NO"); 
 

 
       //THIRD MOVE 
 
       $(".square").animate({top: '-10px'}, 'slow', function() { 
 
       \t $(".square").html("YESSSSSSSSSSSSSSS"); 
 

 
        //FOURTH MOVE 
 
        $(".square").animate({left: '-10px'}, 'slow', function() { 
 
         $(".square").css({ 
 
          backgroundColor: "Black", 
 
          color: "white" 
 
         }); 
 
         $(".square").html("NOO") 
 
        }); 
 

 
       }); 
 
       
 
      }); 
 

 
     }); 
 
    }); 
 
}); 
 

 
function calculate() { console.log("calculate");} 
 
function sortArray() { console.log("sortArray");}

.square { 
 
position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content" class="wrapper box"> 
 

 
<button id="button">Go</button> 
 

 
<article> 
 
    <div class="square">Hello</div> 
 
    <div class="output"></div> 
 
</article> 
 
<input type="text" id="number"/> 
 
<button onclick="calculate();">Check</button> 
 
<button onclick="sortArray();">Input array</button></div>

EDIT:

Um die duration (Geschwindigkeit) zu ändern, fügen Sie einfach die Geschwindigkeit als der zweite Parameter zum animate() Funktion wie folgt, um 3000 Millisekunden Animationsdauer zu haben, oder einen kleineren Wert, um eine schnellere Animation zu haben:

$(".square").animate({top: '250px'}, 3000, function() {