Question

我的网站上有一个部分，当用户点击我想扩展时，我正在使用jQuery的toggleClass

   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);＆lt; - 持续时间时，不行！。如何在第二次点击中使用动画？为了向上缓慢上升

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

Answer 1

尝试创建新动画并在第二次点击时切换，反之亦然。您可以将此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;
}

使用jQuery进行ToggleClass动画制作？

1 个答案: