隐藏的jQuery无法与CSS动画一起使用

Question

I have one question about Jquery hidden fuction.

I have two different Demo from codepen.io

First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a .

Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO .

Answer 1

how about this

is this what you wanted?

$(document).ready(function() {
    var circle = $('.circle');
    var wrap = $('.wrap');
    $(".note a").click(function(e) {
        e.preventDefault();
        $('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
        if (wrap.hasClass('bounceInUp')) {
            wrap.removeClass('bounceInUp').addClass('bounceOutDown');
        }
        else {
            wrap.addClass('animated bounceOutDown');
            wrap.removeClass('bounceOutDown').addClass('bounceInUp');
        }
        if (circle.hasClass('bounceInLeft')) {
            circle.removeClass('bounceInLeft').addClass('bounceOutRight');
        }
        else {
            $('.circle').addClass('animated bounceOutRight');
            circle.removeClass('bounceOutRight').addClass('bounceInLeft');
        }
    });
});

Answer 2

Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx

 $('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
   $('.wrap').hide();
 },2000);