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

革新

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

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

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

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

塞林

这个怎么样

这就是你想要的吗?

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我的DIV无法与JS动画一起正常使用,我该怎么做?

来自分类Dev

ngAnimate在ngIf上无法与幻灯片动画一起使用

来自分类Dev

CSS动画无法与animate.css一起使用

来自分类Dev

代码隐藏中的WPF UserControl动画无法与ContentPresenter一起使用

来自分类Dev

代码隐藏中的WPF UserControl动画无法与ContentPresenter一起使用

来自分类Dev

如何使SVG中的Wings与CSS3动画一起移动

来自分类Dev

将DatePicker与Form外部的扩展动画一起使用

来自分类Dev

什么是位图和位工厂,为什么人们将其与动画一起使用?

来自分类Dev

UIButton与动画一起显示和消失

来自分类Dev

动画无法与计算出的CSS变量一起使用

来自分类Dev

jQuery动画无法与IE一起使用-什么也没发生

来自分类Dev

CSS无法与DOMPDF一起使用

来自分类Dev

CSS无法与bootstrap一起使用

来自分类Dev

CSS无法与NodeJS一起使用

来自分类Dev

CSS无法与DOMPDF一起使用

来自分类Dev

CSS无法与bootstrap一起使用

来自分类Dev

setTimeout无法与CSS一起使用

来自分类Dev

jQuery preventDefault()无法与.on()一起使用

来自分类Dev

Phantom无法与JQuery一起使用

来自分类Dev

jQuery无法与Xampp一起使用

来自分类Dev

jQuery无法与SVG一起使用

来自分类Dev

动画linkBorderHover无法与:: after / :: before元素一起使用?

来自分类Dev

如何创建很少与总是出现的动画一起出现的动画?

来自分类Dev

多个CSS选择器无法与jQuery CSS方法一起使用

来自分类Dev

Javascript / jQuery无法与我的html和CSS一起使用?

来自分类Dev

单击注入HTML的按钮时,如何使div内容与动画一起显示?

来自分类Dev

单击注入HTML的按钮时,如何使div内容与动画一起显示?

来自分类Dev

在Android中单击按钮后使布局与动画一起显示

来自分类Dev

将ViewController推送到与英雄动画一起呈现的View内

Related 相关文章

  1. 1

    我的DIV无法与JS动画一起正常使用,我该怎么做?

  2. 2

    ngAnimate在ngIf上无法与幻灯片动画一起使用

  3. 3

    CSS动画无法与animate.css一起使用

  4. 4

    代码隐藏中的WPF UserControl动画无法与ContentPresenter一起使用

  5. 5

    代码隐藏中的WPF UserControl动画无法与ContentPresenter一起使用

  6. 6

    如何使SVG中的Wings与CSS3动画一起移动

  7. 7

    将DatePicker与Form外部的扩展动画一起使用

  8. 8

    什么是位图和位工厂,为什么人们将其与动画一起使用?

  9. 9

    UIButton与动画一起显示和消失

  10. 10

    动画无法与计算出的CSS变量一起使用

  11. 11

    jQuery动画无法与IE一起使用-什么也没发生

  12. 12

    CSS无法与DOMPDF一起使用

  13. 13

    CSS无法与bootstrap一起使用

  14. 14

    CSS无法与NodeJS一起使用

  15. 15

    CSS无法与DOMPDF一起使用

  16. 16

    CSS无法与bootstrap一起使用

  17. 17

    setTimeout无法与CSS一起使用

  18. 18

    jQuery preventDefault()无法与.on()一起使用

  19. 19

    Phantom无法与JQuery一起使用

  20. 20

    jQuery无法与Xampp一起使用

  21. 21

    jQuery无法与SVG一起使用

  22. 22

    动画linkBorderHover无法与:: after / :: before元素一起使用?

  23. 23

    如何创建很少与总是出现的动画一起出现的动画?

  24. 24

    多个CSS选择器无法与jQuery CSS方法一起使用

  25. 25

    Javascript / jQuery无法与我的html和CSS一起使用?

  26. 26

    单击注入HTML的按钮时,如何使div内容与动画一起显示?

  27. 27

    单击注入HTML的按钮时,如何使div内容与动画一起显示?

  28. 28

    在Android中单击按钮后使布局与动画一起显示

  29. 29

    将ViewController推送到与英雄动画一起呈现的View内

热门标签

归档