检查元素是否淡出（Javascript / Jquery）

Question

有没有办法检查元素当前是否正在淡出？

像这样的东西（伪代码）：

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

isFadingOut（）就是我需要的。 它以某种方式存在吗？

Answer 1

如果您只是想检查某些内容是否已经消失，您只需要检查css opacity值是否小于1.0：

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

这是jQuery扩展所需的代码：

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

注意：淡入淡出是一种异步操作，因此检查循环将永远不会起作用。您需要通过计时器等进行轮询（根据我的JSFiddle）。

另一种方法是使用fadeOut的完成事件：

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

或使用为jQuery动画提供的动画promise：

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

更新

注意：如果元素已处于最终状态，则某些动画事件不会触发done。请改用always()上的promise：

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

Answer 2

您可以在实际淡出时添加触发器：

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

并在其他地方听取此事件

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

用你正在使用的任何东西替换元素。注意：如果您使用的是JQuery

，这将有效