Jquery 隐藏无法使用 css 动画

Question

我有一个关于Jquery隐藏功能的问题。

我有两个来自 codepen.io

的不同 Demo

第一个 DEMO css 动画将运行。但是当我第二次点击 .note a 时 .wrap 不会被隐藏。

第二个DEMO .wrap隐藏但不带动画。我想当我单击 .note a 关闭 .wrap 然后 .wrap 将像第一个 DEMO[=24 一样隐藏 css 动画=].

Answer 1

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

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

Answer 2

怎么样this

这是你想要的吗？

$(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');
        }
    });
});

Jquery 隐藏无法使用 css 动画

Jquery hidden not working with css animation

javascript

css

jquery