Clever Geek Handbook

Check if element is not being erased (Javascript / JQuery)

Is there a way to check if an element is currently disappearing?

Something like this (Pseudocode):

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

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

+3


source to share


2 answers


If you just want to check if something is already disappearing, you just need to check the css value opacity

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. ... fade is an asynchronous operation, so checking the loop will never work. You will need to poll it through a timer, etc. (According to my JSFiddle).

An alternative is to use the completion event fadeOut

:



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

or use animation promise

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 its final state. always()

Use instead always()

:

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


source


You can add a trigger when you actually fade like this:

$(element).fadeOut("normal", function () {
// your other code
$(this).trigger('isFadingOut');
});

and listen for this event somewhere else



$(element).on('myFadeOutEvent',function() {
// do something
});

replace the element with what you are using. Note. This will work if you are using JQuery

0


source






More articles:


All Articles