Onclick Function Requires Double Click Because Of Class Assignment Delay

The title says it all. I got a list of LI elements. When clicked on navigation the active li gets a class 'current' but this takes a second. But when I use my code I need to click

Solution 1:

I found what is causing the issue :

You are playing the elements whose parent has ".current" class when a span is clicked.

But when you click an element, it et the ".show" class, and the previously selected span get the ".hide" class AND keeps the ".current" class, until the animation is finished (then the ".show" & ".hide" class are removed and the ".current" class switch elements).

One solution is changing the selectors like this :

$(document).on('click','span',function(){
      console.log('the if is running');
      $('.current, .hide').find('video').each(function() {
          $(this).get(0).pause();
      });  
      $('.show').find('video').each(function() {
          $(this).get(0).play();
      });

});

By doing this, whenever a span is clicked, you pause the element whose parents have the ".hide" class, and play the ones whose parents have the ".show" class.

Another solution should be creating an event when a class is applied (See jQuery - Fire event if CSS class changed).