使用 slideToggle 停止动画

Posted 2023-02-25

【中文标题】使用 slideToggle 停止动画

【英文标题】：Stop animation using slideToggle

【发布时间】：2017-02-01 14:53:05

【问题描述】：

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

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

如果用户在动画过渡时单击按钮，则单击将排队。如果用户在动画正在执行时单击按钮，如何停止动画？

【问题讨论】：

或者，有一个布尔值 inTransition 并检查点击处理程序是否已经发生了转换。无需删除/读取处理程序，与将处理程序留在那里并且有时不执行它相比，这只会减慢页面速度。

【参考方案1】：

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

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