Check if an element is fading out (Javascript/Jquery)

Question

is there a way to check if an element is currently fading out?

Something like this (Pseudo Code):

while(element.isFadingOut()){
//do something
}

The isFadingOut() is what I need here. Does it exist somehow?

Answer 1

If you just want to check that something is already fading, you just need to check the css opacity value for anything less than 1.0:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vkcpknLh/

This is the required code as a jQuery extension:

$.fn.isFading = function(){
    return this.css('opacity') < 1;
};

Note: the fade is an asynchronous operation, so checking in a loop will never work. You would need to poll it via a timer etc (as per my JSFiddle).

The alternative is to use the completion event of fadeOut:

 element.fadeOut(function() {
       // do something on completion
 });

or use the animation promise provided for jQuery animation:

 element.fadeOut().promise().done(function(){
       // do something on completion of all animations for this element
 });

Update:

Note: Some animation events do not fire done if the element was already in the final state. Use always() on the promise instead:

 element.fadeOut().promise().always(function(){
       // do something on completion of all animations for this element
 });