jquery button klickt gibt das Ergebnis nicht wie erwartet zurück

Ich habe den folgenden Code in jquery.jquery button klickt gibt das Ergebnis nicht wie erwartet zurück

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#button1").click(function() { 
 
     alert(1) 
 
     var div = $("div"); 
 
     div.animate({ 
 
      left: '100px' 
 
     }, "slow"); 
 
     div.animate({ 
 
      fontSize: '3em' 
 
     }, "slow"); 
 
     }); 
 

 
     $("button").click(function() { 
 
     alert(3) 
 
     var div = $("div"); 
 
     div.animate({ 
 
      left: '50px' 
 
     }, "slow"); 
 
     div.animate({ 
 
      fontSize: '7em' 
 
     }, "slow"); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <button id="button2">Start Animation2</button> 
 
    <button id="button1">Start Animation</button> 
 
    <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> 
 
</body> 
 
</html>

, wenn ich den Code ausführen, wird der Start animation2 Taste zum ersten Mal, aber keine Wirkung für die zweite und nach Klicks. Aber

Start Animation

Taste funktioniert auf jedem Klick. Ich kann verstehen, ist es, weil ich $ geschrieben haben („# button1“). Klicken (function() für die jeweilige Taste. Aber was ist der Grund dafür keine Auswirkungen auf

Start animation2

mehrere Klicks?

Quelle

2017-04-21 Tom Cruise

var div = $ ("div"); wählt alle div-Elemente aus und gibt ein Array derselben zurück. Sehen Sie, wenn Sie es genauer machen (fügen Sie eine Klasse hinzu oder sagen Sie div [0] .animate anstelle von div.animate), wird das Problem gelöst. –

Welchen Effekt versuchen Sie zu erzeugen? Sie scheinen verwirrt zu sein, wie die Selektoren arbeiten. –

@KilianStinson Animationseffekt –

Die Frage an die Wähler fällig. Sie haben Ereignisse an #button1 und button. Deshalb, wenn #button1beide laufen Event-Handler geklickt wird. wenn #button2geklickt wird o nly läuft der Event-Handler, der an button gebunden ist. Dies scheint nichts zu tun, da der Endzustand von #button1 alles an die gleiche Position bringt - daher gibt es nichts zu verschieben.

Quelle

2017-04-21 07:59:40

Warum auf den zweiten Klick das div nicht links anwenden: 50px w.r.to die aktuelle Position? –

Es liegt daran, dass Sie die Position auf 50px einstellen. Wenn Sie bei jedem Klick 50px erhöhen möchten, verwenden Sie 'links: '+ = 50px'' –

Ok. Aber wie sieht der Browser aus: 50px von der aktuellen Position oder von der Anfangsposition? –

Dies liegt daran,

div.animate({ 
    left: '100px' 
}, "slow");`

wird SET Ihre left Eigenschaft auf 100px und nicht Zuwachs es. Es wird es einmal einstellen, und dann das zweite, sobald sich nichts ändert, da es bereits bei 100px ist.

Quelle

2017-04-21 07:59:55

jquery button klickt gibt das Ergebnis nicht wie erwartet zurück

Antwort

Verwandte Themen