使用 slideToggle 停止动画

Question

我有一个按钮 <button class="foo">Foo</button>，它附有事件处理程序，使用 .slideToggle()

展开或折叠块

$('.foo').on('click', function () {
  const fooBlock = $(this).next();
  fooBlock.slideToggle(() => {
    fooBlock.toggleClass('hidden');
  });

如果用户在动画转换时单击按钮，则单击会排队。如果用户在动画已经执行时单击按钮，我该如何停止动画？

Answer 1

更好的解决方案是仅使用 stop(true) 清除连续点击队列。这意味着 UI 在动画期间仍然响应用户输入并且还可以防止动画建立。试试这个：

$('.foo').on('click', function() {
  const fooBlock = $(this).next();
  fooBlock.stop(true).slideToggle(() => {
    fooBlock.toggleClass('hidden');
  });
});

使用 slideToggle 停止动画

Stop animation using slideToggle

javascript

jquery

slidetoggle

jquery-events