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停止动画

1 个答案: