Animate.css doesnt work for Second click

Question

If i click .img-1 or .img-2 first time it works. bt not in second time without page refresh. I am using Animate.css (zoomIn). Here is the code sample --

html:

Answer 1

http://jsfiddle.net/wahidsherief/e87dkpbf/1/

Markup :

    

     
×


 image 1
 image 2

css :

.back-end{position: absolute; width: 100%;height: 100%;background: rgba(0,0,0,.4);    z-index: 600}
.front-end {background: none repeat scroll 0 0 #fff;height: 65%;left: 16%;position: absolute;top: 22%;width: 68%;z-index: 1000;}
.dismiss{color: black;z-index: 2000;background:red;padding: 30px 50px;font-size: 60px;cursor: pointer;}

Script :

$('.back-end,.front-end,.dismiss').hide();

function applyZoomInOutAnim(x) {
    $('.back-end,.front-end,.dismiss').removeClass("zoomIn zoomOut").addClass(x +' animated');
}

$('.thumbnail').click(function () {
    applyZoomInOutAnim('zoomIn');
     $('.back-end,.front-end,.dismiss').show();
});

$('.dismiss').click(function () {
    applyZoomInOutAnim('zoomOut');
     $('.back-end,.front-end,.dismiss').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).hide();
     });

});