检查元素是否淡出(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触发。请改用promise上的always()：

 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