jQuery queueを利用して、アニメーションを作成する

jQuery queueを利用して、DOMオブジェクトの属性を動的に変更して、動画効果を実現する。

ソースコード：

<script type="text/javascript">
var callbackAnimation = function() {
    $("#btn01f").dequeue("myAnimation");
}
$(function(){
    $("#btn01f").click(function(){
        var FUNC=[
            function(){$("#divB1").animate({"left":"+=100"}, callbackAnimation);},
            function(){$("#divB2").animate({"left":"+=100"}, callbackAnimation);},
            function(){$("#divB1").animate({"top":"+=100"}, callbackAnimation);},
            function(){$("#divB2").animate({"top":"+=100"}, callbackAnimation);},
            function(){$("#divB1").animate({"left":"-=100"}, callbackAnimation);},
            function(){$("#divB2").animate({"left":"-=100"}, callbackAnimation);},
            function(){$("#divB1").animate({"top":"-=100"}, callbackAnimation);},
            function(){$("#divB2").animate({"top":"-=100"}, callbackAnimation);},
        ];
        
        $("#btn01f").queue("myAnimation", FUNC);
        callbackAnimation();
    });
});
</script>
<div id="divB1" style="background-color:blue;position:relative;top:0;left:0px;width:20px;height:20px;"></div>
<div id="divB2" style="background-color:red;position:relative;top:0;left:0px;width:20px;height:20px;"></div>
<button id="btn01f">確定</button>