也许这个问题很令人困惑，但让我给你举个例子，当我点击切换宽度的按钮时，按下按钮后 div 会继续以动画方式显示，看起来并不令人惊奇。我想要的是 div 中途停止并转到另一条路，并且当再次按下按钮时不完成其现有动画。
$(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>
这是小提琴，这样你就可以明白我在说什么。尝试向“显示菜单”按钮发送垃圾邮件。
https://jsfiddle.net/x14usdga/5/
非常感谢您的帮助，我到处都找过了，但似乎找不到任何关于我的问题的信息。
您可以在执行动画之前检查元素是否没有动画
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; }您可以使用
.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; }