jQuery selector to check if an element is animating to hidden

Question

Is there a way to tell if an element is either hidden or is currently in the process of hiding (via an animation)? The only way I can think to do it is to store a flag in the element's data when you call show or hide, but I was wondering if there was another way?

Answer 1

You get the hidden one with $(":hidden") and then the animating ones with $(":animated") and with the :animated check the .queue() if it has the hide method inside.

Answer 2

Could you do 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 (it may require some more testing though).

So just add :hiding it will match hidden elements, and elements that are currently being animated to 0. It will now only match elements that are disappearing, not appearing.