JQuery wait until animation ends

This code show how to control a button clicked to animate some content so the animation is called only if the element is not being already animated.

by Alvaro Aneiros

HTML

<div>
    <p>Open console and press both buttons repeatedly, you will notice that the left one doesn't execute until the animation is finished, the second one is executed although the aniamtion is not ended</p>
    <button id="limit">Toggle waiting until finish</button>
    <button id="no-limit">Toggle without waiting</button>
    <br>
    <div class="gray-border"> 
        <span>Toggling Div<span>
    </div>
<div>

CSS

.gray-border {
    border: solid gray;
    margin: 0 auto;
    display: inline-block;
    margin-top: 20px;
}
.gray-border span {
    font-size:30px;
}

JavaScript

// To check the functionality of the buttons you should press them repeatedly and check the console.
// Button with id='#limit' doesn't execute the toggle if the div is still being animated

$('#no-limit').click(function () {
    $('.gray-border').fadeToggle(1000);
    console.log('Without Limit');
});

$('#limit').click(function () {
    if (!$('.gray-border').is(':animated')) { // If the div is not being animated
        $('.gray-border').fadeToggle(1000);
        console.log('With Limit');
    }
});