連続するアニメーションの時間間隔を制御する

setTimeout関数を使い、複数のアニメーションを制御する方法もあるが、どうもややこしくなりがちですっきりいかなかった。

そこで、

参考 http://qiita.com/kakusuke/items/48c0399d43671825f770

Deferredオブジェクトで各アニメーションの開始を指定する方法に落ち着いた。あまりスマートではないのかもしれないが、個人的にはわかりやすい。

 

 

1〜2番めのアニメーションまでの間隔は　100ms、2〜3番めは　1000msとちょっと長くなっている。

jQuery.noConflict();

jQuery.extend({
    wait: function(duration){
        var dfd = jQuery.Deferred();
        setTimeout(dfd.resolve, duration);
        return dfd;
    }
});

jQuery('.btn').click(function() {

var Timer=500;//アニメーション開始までの間隔

jQuery.wait(Timer).done(function(){
jQuery(function(){

jQuery('#box1').animate({backgroundColor:'#00A1CB'},500);//アニメーション(1)

});
});Timer=Timer+100;//次のアニメーションまでの間隔

jQuery.wait(Timer).done(function(){
jQuery(function(){

jQuery('#box2').animate({backgroundColor:'#7DB500'},500);//アニメーション(2)

});
});Timer=Timer+1000;//次のアニメーションまでの間隔

jQuery.wait(Timer).done(function(){
jQuery(function(){

jQuery('#box3').animate({backgroundColor:'#F18D05'},500);//アニメーション(3)

});
});

});