Wie kann ich dafür sorgen, dass die JQuery-Toggle-Breite-Animation auf halbem Weg stoppt, um sie wieder zu schließen?
P粉238355860
P粉238355860 2024-03-19 23:49:40
0
2
370

Vielleicht ist diese Frage verwirrend, aber ich gebe Ihnen ein Beispiel: Wenn ich auf die Schaltfläche zum Ändern der Breite klicke, wird das Div nach dem Drücken der Schaltfläche weiter animiert, was nicht besonders toll aussieht. Ich möchte, dass das Div auf halbem Weg anhält und in die andere Richtung geht und seine vorhandene Animation nicht abschließt, wenn die Taste erneut gedrückt wird.

$(document).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").animate({
      width: 'toggle'
    });
  });
});
.menuContainer {
  height: 100px;
  width: 50px;
  float: left;
  position: relative;
  background-color: black;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
  <!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>

Hier ist die Geige, damit Sie verstehen, wovon ich spreche. Versuchen Sie, die Schaltfläche „Menü anzeigen“ zu spammen.

https://jsfiddle.net/x14usdga/5/

Vielen Dank für Ihre Hilfe. Ich habe überall gesucht, kann aber anscheinend keine Informationen zu meinem Problem finden.

P粉238355860
P粉238355860

Antworte allen(2)
P粉567112391

您可以在执行动画之前检查元素是否没有动画

https://api.jquery.com/is/
https://api.jquery.com/animated-selector/

$(document).ready(function(){
  $('.menuToggle').click(function(){
    if( $('.menuContainer').is(':animated') ) { return false; }
    $(".menuContainer").animate({width: 'toggle'});
  }); 
});
.menuContainer{
    height: 100vh;
    width: 15vw;
    float: left;
    position: relative;
    background-color: black;
    display: none;
}


    
P粉701491897

您可以使用.stop()方法。试试这个

$(document).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").stop().animate({
      width: 'toggle'
    });
  });
});
.menuContainer {
  height: 100px;
  width: 50px;
  float: left;
  position: relative;
  background-color: black;
  display: none;
}


Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage