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

Question

我对Jquery隐藏功能有一个疑问。

我有两个来自codepen.io的演示

第一个DEMO CSS动画将起作用。 但.wrap是当我点击第二次不被隐藏.note a 。

第二个DEMO .wrap隐藏，但不包含动画。 我想要当我单击.wrap .note a以关闭.wrap然后.wrap将像第一个DEMO一样被css动画隐藏。

Answer 1

这个怎么样

这就是你想要的吗？

$(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

使用setTimeout函数http://codepen.io/akshay-7/pen/gbgYvx

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