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?

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?

• javascript
• jquery

Share Improve this question Follow asked May 12, 2010 at 0:48 nickfnickf 547k199199 gold badges658658 silver badges727727 bronze badges 6

• How did you end up implementing this? – alex Commented Jun 3, 2010 at 5:54
• Setting a flag in data when the animation starts, and checking for that flag again. – nickf Commented Jun 3, 2010 at 7:14
• @nickf Ah, a solution, but not so elegant! I would love to see you get the custom selector working :) – alex Commented Jun 3, 2010 at 14:37
• @alex - haha, a challenge? I don't think using setTimeout as you proposed would work, since then the selection would be running asynchronously. There must be some internal "target opacity" value... – nickf Commented Jun 3, 2010 at 16:12
• @nickf Yeah that is what I thought... I wonder if it's exposed somehow. I might ask a question here :) – alex Commented Jun 3, 2010 at 22:50

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

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.

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.

You can check if the element is animated like this:

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