我想知道是否有办法在fadeIn开始之前等待fadeOut完成,因为当我运行以下代码时,它会将一个div放在另一个下面,然后当它淡出时它才会上移...看起来有点丑陋。
代码如下:
代码如下:
$('.sidebarform').fadeOut('slow');
$('.sidebarsuccess').fadeIn('slow');
$('.sidebarform').fadeOut('slow');
$('.sidebarsuccess').fadeIn('slow');
fadeOut
函数有一个回调函数,会在动画完成时执行:
$('.sidebarform').fadeOut('slow', function() {
$('.sidebarsuccess').fadeIn('slow');
});
另一个选项是使用Promise,它将等待.sidebarform上的所有挂起的动画完成,即使它们是在其他地方启动的:
$('.sidebarform').fadeOut('slow').promise().done(function() {
$('.sidebarsuccess').fadeIn('slow');
});
sidebarform
类的元素,在被接受的答案中,回调函数将针对每个元素进行调用。例如,如果您在回调中有console.log('HERE');
,则会在控制台中看到HERE X次。Promise告诉jQuery在与附加函数(fadeOut)相关的一段时间内执行某些操作,并且done()
告诉它承诺在完全完成(已完成,呆)时运行。通过这种方式,您可以拥有一个淡出cb来更改innerhtml,以及一个完成cb来警报控制台。 - Clayton Engle我正在使用jQuery的队列 - 允许您将任何内容放入fx
堆栈中(取消也可以与之一起使用,无需使用最终的.promise()
):
$('.sidebarform').fadeOut('slow').queue(function(done) {
$('.sidebarsuccess').fadeIn('slow');
done();
}) .... other chained effects
done()
。 .queue()
将保持堆栈,直到调用done()
- 用于异步执行很有用。它不会等待fadeIn。fx
堆栈等待fadeIn(只是额外的示例):$('.sidebarform').fadeOut('slow').queue(function(done) {
$('.sidebarsuccess').fadeIn('slow', done);
}) .... other chained effects kicking in after fadeIn