animate()

説明補足説明コードコメント投稿

このサンプルは、jQueryのanimate(), slideUp(), slideDown()APIを利用してボックスを移動します。サンプルの[Run]ボタンをクリックすると右、下、左、上の順に移動して元の位置に戻ります。

このサンプルは、jQueryのanimate(), slideUp(), slideDown()APIを利用してボックスを移動します。サンプルの[Run]ボタンをクリックすると右、下、左、上の順に移動して元の位置に戻ります。 

$("#btnRun").click(function(){

  $("#box")
    .animate({opacity: "0.1", left: "+=400"}, 1200)
    .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
    .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
    .animate({top: "0"}, "fast")
    .slideUp()
    .slideDown("slow");		  

});

<button id="btnRun">Run</button>
<div id="box"></div>