ToggleClass使用jQuery进行动画制作吗？

我有一节在我的网站，当用户点击我想它的扩大，我使用jQuery的toggleClass此ToggleClass使用jQuery进行动画制作吗？

jQuery('.menux').click(function() { 
     jQuery(this).toggleClass('is-active'); 
     jQuery('.a').toggleClass('a1'); 
     jQuery('.b').toggleClass('b1'); 
     jQuery('.c').toggleClass('c1'); 
    });

点击时，动画完美地运行。但是当我第二次点击时，动画不会出现。第一次点击时不同，动画缓慢运行。当我使用jQuery('.c').toggleClass('c1', 2000); < - 持续时间，不工作！如何在第二次点击中使用动画？为了提升缓慢向上

这是我的测试https://jsfiddle.net/u6aztsgt/1/

来源

2016-12-27 test

你有什么期待，当你点击了第二次！ – PacMan

您在此JSFiddle中完全没有使用jQuery - 您正在使用纯香草JavaScript来添加和删除类。然后你的CSS有一个关键帧动画，用于显示何时添加类。您需要在移除该类时反向播放此动画（本机支持CSS动画：'属性）。 –

对不起看更新https://jsfiddle.net/u6aztsgt/1/ – test

尝试创建一个全新的动画和切换，关于第二次点击，反之亦然。你可以使用这个CSS的第二次点击动画，

@-webkit-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}} 
@-moz-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}} 
@keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}} 
.a2, .b2, .c2 { 
    -webkit-animation: dropUp 1s; 
    -moz-animation: dropUp 1s; 
    animation: dropUp 1s; 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    animation-fill-mode: both; 
    opacity: 0; 
    display: block; 
} 

.a2 { 
    -webkit-animation-delay: 0s; 
    -moz-animation-delay: 0s; 
    animation-delay: 0s; 
} 

.b2 { 
    -webkit-animation-delay: 0.5s; 
    -moz-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
} 

.c2 { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    animation-delay: 1s; 
}

来源

2016-12-27 04:59:56

ToggleClass使用jQuery进行动画制作吗？

回答

相关问题