Issue on Re-animating a div in CSS and jQuery

Problem

Can you please take a look at This Demo and let me know that why I am not able to re-animate the animation after one click. the css rules and jquery works only for First time click.

<div class="animatetop"></div>
<button id="clicker">Click Me</button>

.animatetop {
    height:250px;
    width:250px;
    background-color:#FFCC33
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        animation-delay:2s;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        animation-delay:2s;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
        animation-delay:2s;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    animation-delay:2s;
}


$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp');
    });
});
Problem courtesy of: user1760110

Solution

You can only add a class to an object once. Once it is there, adding it again does nothing. You'll have to remove the classes animated fadeInUp once the animation completes.

One way to do this is with setTimeout():

$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp');
        setTimeout(function(){

            $('.animatetop').removeClass('animated fadeInUp');

        }, 1500);
    });
});

JSFiddle

Solution courtesy of: David

Discussion

You can use queue() and deque() to add and remove your classes in this case:

$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp').delay(500).queue(function () {
            $(this).removeClass("animated fadeInUp");
            $(this).dequeue();
        });
    })
});

Updated Fiddle

Discussion courtesy of: Felix

This recipe can be found in it's original form on Stack Over Flow.