JSFiddle - React, Tailwind, and code Playground

by Andrey Zaytsev

HTML

<div>
    <button id="b1" onclick="f1();">Простой пример</button>
    <button id="b2" onclick="f2();">Пример с селектором</button>
    <button id="b3" onclick="f3();">Пример с методом</button>
    <button id="link">BONUS</button>
</div>
<div id="block"></div>

CSS

#block {
    border: 1px solid black;
    background: orange;
    width: 100px;
    height: 100px;
    margin: 10px;
}

JavaScript

// пример без учёта очереди, сколько раз кликнули - столько и выполнится
function f1() {
    $('#block').fadeToggle();
}

// пример с учётом через селектор ":animated"
function f2() {
    var block = $('#block');
    if (!block.is(':animated')) {
        block.fadeToggle();
    }
}
// или что тоже самое, но не оптимально, зато похож на ваш вариант
function f21() {
    if (!$('#block:animated').length) {
        $('#block').fadeToggle();
    }
}

// пример с использованием метода .queue()
function f3() {
    var block = $('#block');
    if (!block.queue().length) {
        block.fadeToggle();
    }
}

// BONUS!!!
$(function() {
    $('#link').click(function() {
        $('#block:not(:animated)').fadeToggle();
    });
});