jQuery Clickable Dropdown with CSS Animation issue

Question

Please check out this fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/

HTML:

<a href="#" class="roll-btn">Do it! Roll me down and up again!</a>
<ul class="roll-btns">
<li><a href="#" class="control animated noshow one">Milk</a></li>
<li><a href="#" class="control animated noshow two">Eggs and Cheese</a></li>
<li><a href="#" class="control animated noshow three">Bacon and Eggs</a></li>
<li><a href="#" class="control animated noshow four">Bread</a></li>
</ul>

jQUERY

$('.roll-btn').click(function() {

    var ctrls = '.control';

    if ($(ctrls).hasClass('noshow')) 
  {
    $(ctrls).each(function() {
       $(this).removeClass('noshow');
       $(this).addClass('fadeInDown');
    });
    } else {
    $(ctrls).each(function() {
       $(this).removeClass('fadeInDown');
       $(this).addClass('fadeOutDown');
    });
  }

});

This is a pretty simple thing, but I'm having trouble implementing it. Basically, the class "noshow" is a toggle for the A elements. If it does not exist, then add the CSS animation to the A element. If the CSS animation exists, add another css element to hide the A elements. I've tried delaying the "noshow" class, and other methods to no avail. This entire example works correctly with the first two clicks, but because it doesn't add the noshow class, it won't work after that. Basically, I need to add the noshow class on the second click AFTER the CSS animation gets done playing.

Yong · Accepted Answer · 2016-08-01 18:48:37Z

1

$('.roll-btn').click(function() {

  var ctrls = '.control';

  if ($(ctrls).hasClass('noshow') || $(ctrls).hasClass('fadeOutDown')) {
    $(ctrls).each(function() {
      $(this).removeClass('noshow');
      $(this).addClass('fadeInDown');
      $(this).removeClass('fadeOutDown');
    });
  } else {
    $(ctrls).each(function() {
      $(this).removeClass('fadeInDown');
      $(this).addClass('fadeOutDown');
    });
  }
});

answered Aug 1, 2016 at 18:48

Yong

1,1271 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Clickable Dropdown with CSS Animation issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related