如何让jQuery等待效果完成？

107

我敢肯定，前几天我读到了这件事，但似乎找不到任何地方。
我有一个fadeOut()事件，之后我删除了元素，但是jQuery在有机会完成淡出之前删除了该元素。
如何让jQuery等待元素淡出，然后将其删除？

jquery

— 铀
source

167

您可以指定一个回调函数：

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

文档在这里。

— 保罗·贝尔甘蒂诺
source

答对了。我以为是这样，但是我需要做的是将我的整个功能放在那里，而不仅仅是删除部分。附言：如果有人对我读过的书感兴趣，现在又发现是Learning JQuery-Better Interaction and Design。再次感谢

— uriDium

如果有人使用旧的jQuery，则此“动画完成回调”错误是一个讨厌的错误：bugs.jquery.com/ticket/5684

— JustAMartin 2014年

178

在jQuery 1.6版本中，您可以使用.promise()方法。

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});

— 雷纳尔多少年
source

4

这是大多数jQuery的动画多余的，因为有大多数方法回调ARGS，但使用promise()或when()和done()您可以利用来自第三方方法的一些非常酷的行为，甚至是你自己。+1表示意义.promise()！

— stuartc 2012年

4

以前没有听说过，只是救了我的屁股。

— 棱镜规格2012年

1

就我而言，我试图访问代码中其他地方发生的元素的当前动画，因此无法访问它的回调。+1

— 克里斯蒂安

11

使用promise（）还可以让您为完成所有操作设置单个回调。如果在一组10个对象上调用fadeOut（），则将“ this”设置为适当范围的每个对象都将有一个回调。如果您只想触发一次，则此功能非常有用。另外：如果您对选择器进行动画处理，该选择器最终匹配零个元素，则正常的回调将永远不会触发。无论如何，Promise（）都会在末尾触发。

— zslayton 2012年

6

您还可以像这样链接它：$(selector).fadeOut('slow').promise().done(function(){...});

— Syclone 2014年

9

您也可以使用$.when()等到promise完成：

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

如果您执行的请求很可能失败，那么您甚至可以更进一步：

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );

— 凯撒
source

2

使用此答案的这一部分$.when()不起作用，因为myEvent()它不会返回承诺，并且$.when()希望您通过一个或多个承诺来履行其职责。

— jfriend00 '16

6

如果您希望切换某个东西，在同一位置淡出和淡入另一个，则可以在div上放置一个{position：absolute}属性，这样两个动画就可以彼此叠加播放，而您不必等待一个动画结束，然后再启动另一个动画。

— 萨明
source