animate(params,duration,easing,callback)

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

このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大/縮小します。サンプルの[Expand]ボタンをクリックするとdiv要素に表示されている「Hello!」メッセージが拡大します。[Shrink]ボタンをクリックするともとの状態になります。

このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大/縮小します。サンプルの[Expand]ボタンをクリックするとdiv要素に表示されている「Hello!」メッセージが拡大します。[Shrink]ボタンをクリックするともとの状態になります。

animate(params[,duration][,easing][,callback])
animate()APIの引数paramsには、CSSのプロパティを指定します。プロパティの値は、アニメーションが完了したときの値を設定します。引数durationにはアニメーションする間隔を指定します。"slow", "normal", "fast"を指定するか数値(ms)で時間を指定することも可能です。引数easingには、"linear","swing"を指定します。この機能を利用するにはプラグインが必要になります。引数callbackにはアニメーションが完了したときにコントロールを渡す関数名を指定します。 

$("#btnExpand").click(function(){
  $("div").animate({ 
    width: "50%", 
    height: "50%",
    opacity: 0.5,  
    fontSize: "3em", 
    borderWidth: "10px"
  }, "slow" );
});

$("#btnShrink").click(function(){
  $("div").animate({ 
    width: "100px",
    height: "20px",
    opacity: 1.0,          
    fontSize: "0.8em", 
    borderWidth: "1px"
  }, 2000 );
}); 

<button id="btnExpand">Expand</button>
<button id="btnShrink">Shrink</button>  
<div>Hello!</div>