假设我有三个div,我想让每个div都动画,一旦完成了。目前,我写道:
$('div1').fadeOut('slow',function() { $('div2').fadeOut('slow',function() { $('div3').fadeOut('slow'); }); });
哪个是丑的,但可以管理。
现在想象我有10种不同的动画需要一个接一个地发生在不同的元素上。突然,代码变得如此笨重,很难管理…
这是我想要做的伪代码:
$('div1').fadeOut('slow' { delay_next_function_until_done: true } ); $('div2').fadeOut('slow' { delay_next_function_until_done: true } ); $('div3').animate({ top: 500 },1000 );
我该如何实现?
解决方法
如果您使用最新版本的jQuery,请使用动画承诺:
$('div1').fadeOut('slow').promise().pipe(function() { return $('div2').fadeOut('slow'); }).pipe(function() { return $('div3').animate({ top: 500 },1000 ); });
你可以使它通用:
$.chain = function() { var promise = $.Deferred().resolve().promise(); jQuery.each( arguments,function() { promise = promise.pipe( this ); }); return promise; }; var animations = $.chain(function() { return $('div1').fadeOut('slow'); },function() { return $('div2').fadeOut('slow'); },function() { return $('div3').animate({ top: 500 },1000 ); }); $.when( animations ).done(function() { // ALL ANIMATIONS HAVE BEEN DONE IN SEQUENCE });
还有很多功能关闭,但这是Javascript的本质。然而,使用Deferreds / Promises更加自然,更灵活,因为您避免回调“初始”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。