var des = []; //用來放Deferred或Promise物件的array var deferred; deferred = $.Deferred(); des.push(deferred.promise()); //也可以寫成des.push(deferred),deferred.promise()回傳的為Promise物件,為不可修改狀態只供查詢狀態的物件,即沒有resolve()等方法 // $('#anim1').addClass('animClass').one('animationend', resolveDeferred(deferred)); deferred = $.Deferred(); des.push(deferred.promise()); $('#anim2').animate({ paddingLeft: "-=100%" }, 9000, resolveDeferred(deferred)); deferred = $.Deferred(); des.push(deferred.promise()); $('#anim3').animate({ paddingLeft: "-=100%" }, 5000, resolveDeferred(deferred)); //因為$.when()只能接收一個一個用逗號分開的參數,所以利用apply來將array以個別 //參數的方式傳給when(),when()可接受Deferred及Promise物件 $.when.apply($, des).done(function() { $('#text').html($('#text').html() + '<br/>All finished!'); }); //也可以寫成以下,then可以給兩個參數,第一個為done()的callback函式, //第二個為fail()的callback函式 //$.when.apply($, des).then(function(){ // $('#text').html($('#text').html() + '<br/>All finished!'); //}); function resolveDeferred(deferred) { return function() { $('#text').html($('#text').html() + '<br/>#' + this.id + ' finished!'); deferred.resolve(); } }
<div class='animSection'> <div id='anim1'>Watch me move1</div> <div id='anim2'>Watch me move2</div> <div id='anim3'>Watch me move3</div> </div> <br/> <div id='text' class="text">Detect Result:</div>
.animSection div{ padding-left: 100%; } .animClass { animation-name: myAnim; animation-duration: 6s; animation-fill-mode: forwards; } @keyframes myAnim { 0% { padding-left: 100%; } 100% { padding-left: 0%; } }