如何让jQuery等到效果完成?

uri*_*ium 105 jquery

我确信我前几天读到了这个,但我似乎无法在任何地方找到它.
我有一个fadeOut()事件,之后我删除了元素,但jQuery删除元素才有机会完成淡出.
如何让jQuery等到元素淡出,然后将其删除?

Rei*_*ior 172

使用jQuery 1.6版本,您可以使用该.promise()方法.

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

  • 使用promise()还允许您在完成所有操作时设置单个回调.如果你在一组10个东西上调用fadeOut(),那么每个东西都会有一个回调,并将'this'设置为适当的范围.如果你只想开一次,这个功能真的很有帮助.另外:如果您在最终匹配零元素的选择器上设置动画,则正常的回调将永远不会触发.Promise()无论如何都会在最后开火. (11认同)
  • 你也可以这样链接:`$(selector).fadeOut('slow').promise().done(function(){...});` (6认同)
  • 对于大多数jQuery动画来说这是多余的,因为大多数方法都有回调参数,但使用`promise()`或`when()`和`done()`你可以利用第三方方法的一些非常酷的行为,甚至你的拥有.+1表示`.promise()`! (4认同)
  • 之前没有听说过,只是救了我的屁股. (4认同)
  • 好方案! (2认同)

Pao*_*ino 161

您可以指定回调函数:

$(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
});
Run Code Online (Sandbox Code Playgroud)

文档在这里.


kai*_*ser 9

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

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

如果您正在做一个可能失败的请求,那么您甚至可以更进一步:

$.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"?' );
    } );
Run Code Online (Sandbox Code Playgroud)

  • 使用`$ .when()`的这部分答案不起作用,因为`myEvent()`不返回一个promise而`$ .when()`希望你传递一个或多个promises来完成它的工作. (2认同)

Sam*_*min 6

如果它想要切换的东西,淡出一个并在同一个地方淡化另一个,你可以在div上放置一个{position:absolute}属性,这样两个动画就可以在彼此之上播放,而你没有在开始下一个动画之前等待一个动画结束.