JQuery selector to check if an element animates a hidden

Question

Is there a way to find out if an element is hidden or is it in the process of hiding (through animation)? The only way I can do this is to save the flag in the data element when calling show or hide , but I was wondering if there is another way?

Answer 1

You can make a custom jQuery selector for it

  (function($) { var endOpacity, oldStep = jQuery.fx.step.opacity; $.fx.step.opacity = function( fx ) { endOpacity = fx.end; return oldStep(fx); }; $.expr[':'].hiding = function(obj){ var $this = $(obj); return ($this.is(':hidden') || ($this.is(':animated') && endOpacity === 0)); }; })(jQuery); 

This worked for me (this may require a little more testing).

So just add :hiding , this will match the hidden elements and elements that are currently animating up to 0. Now there will only be matching elements that disappear rather than appear.

Answer 2

You get the hidden code with $(":hidden") and then the animation with $(":animated") and with :animated check .queue() if it has a hide method inside.

Answer 3

You can check if an element is animated as follows:

  if( !$('.your-element').is(':animated') ) { // do animation... } else { return false; }