javascript - 使用 SlideToggle 停止动画

Question

我有一个按钮<button class="foo">Foo</button>附加一个事件处理程序，使用 .slideToggle() 展开或折叠 block

$('.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');
  });
});