如何让jQuery宽度切换动画中途停止并反向执行？

当频繁点击切换按钮时，目标元素的动画会因队列堆积持续执行，无法立即响应反向操作。只需在调用animate()前加入stop()方法，就能实现中途停止当前动画并执行反向切换。

修改后的JavaScript代码 #

$(document).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").stop(true, false).animate({
      width: 'toggle'
    });
  });
});

参数说明 #

• stop(true, false)：
  • 第一个参数true：清空元素的所有待执行动画队列，彻底终止后续排队的动画
  • 第二个参数false：保持元素在当前动画的中间状态，不强制跳转到动画结束位置，确保切换自然流畅

完整代码示例 #

HTML

<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>

CSS

.menuContainer {
  height: 100px;
  width: 50px;
  float: left;
  position: relative;
  background-color: black;
  display: none;
}

JavaScript

$(document).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").stop(true, false).animate({
      width: 'toggle'
    });
  });
});

内容的提问来源于stack exchange，提问作者jimmy4