остановка анимации с использованием 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), чтобы очистить очередь при последовательных кликах. Это означает, что пользовательский интерфейс все еще реагирует на ввод пользователя во время анимации, а также предотвращает создание анимаций. Попробуйте следующее:

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