CODEWITHSUNDEEP
javascriptjquerycss
test
test

Reputation: 17

ToggleClass animate with jQuery?

I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this

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

When clicked, the animation runs perfectly. But when I clicked the second time, the animation does not appear. different when clicked the first time, the animation runs slowly down. When i using jQuery('.c').toggleClass('c1', 2000); <-- duration, Not work!. How do I use animation in clicks a second time? In order to ascend slowly upwards

This my test https://jsfiddle.net/u6aztsgt/1/

Upvotes: 0

Views: 346

Answers (1)

balaji thirumal
balaji thirumal

Reputation: 111

Try creating a new animation and toggle that on second click or vice versa. You can use this css for the second click animation,

@-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;
}

Upvotes: 2

Related Questions