執筆者: 有限会社 WINGS プロジェクト 山田 祥寛

動作確認環境: Visual Studio 2010、jQuery 1.5


jQuery では、特定の要素に対してアニメーション効果を適用するために、さまざまなメソッドを提供しています。たとえば、以下はページをロードしたタイミングでアイコン画像に対してスライドアップ → スライドダウン → フェードアウトを順に実行する例です。それぞれのアニメーションには 1,000 ミリ秒かけるものとします。

HTML
<img src="../images/azure_logo.jpg" alt="Windows Azure" /> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('img'). 
  slideUp(1000).    // スライドアップ 
  slideDown(1000).    // スライドダウン 
  fadeOut(1000);    // フェードアウト 
</script> 
 
 

                           

図 1 図 2 図 3

その他にも以下のようなメソッドが用意されており、すべて同じ要領で利用できますので、上のサンプルを書き換えて動きの違いを確認してみると良いでしょう。

メソッド

概要

show/hide

要素を表示/非表示

toggle

要素の表示/非表示を交互に切り替え

slideDown/slideUp

要素をスライドダウン/スライドアップ

slideToggle

要素のスライドダウン/スライドアップを交互に切り替え

fadeIn/fadeOut

要素をフェードイン/フェードアウト

animate メソッドを利用することで、上のメソッドではまかなえないような独自のアニメーションを自作することもできます。たとえば以下は、ページをロードしたタイミングでアイコン画像を 3,000 ミリ秒かけて 120 × 80 にリサイズする例です。

HTML
<img src="../images/azure_logo.jpg" alt="Windows Azure" /> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('img').animate( 
  { width: 120, height: 80 },    // アニメーション完了後の状態 
  3000    // アニメーションにかける時間 (ミリ秒) 
); 
</script> 
 
 

                           

図 4図 5

animate メソッドの第 1 引数には、アニメーション完了後の状態を「スタイル プロパティ名: 値」のハッシュとして指定します。ただし、ここで指定できるスタイル プロパティは、値として数値を受け取るものに限られる点に注意してください。 

slideUp、fadeIn などのメソッドと同じく、animate メソッドをメソッド チェーンでつなげることで、複数のアニメーション効果を順に実行することもできます。たとえば、以下はアイコン画像をリサイズした上で、半透明にする例です。

HTML
<img src="../images/azure_logo.jpg" alt="Windows Azure" /> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$('img'). 
  animate({ width: 120, height: 80 }, 3000).    // リサイズ 
  animate({ opacity: 0.5 }, 3000);    // 透明度の変更 (0~1.0:0が透明) 
</script> 
 
 

                           

図 6図 7

Code Recipe Code Recipe

ページのトップへ