このページの本文へ

jQueryによるアニメーションエフェクトの基本

2009年09月17日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

独自のアニメーションエフェクトを設定できるanimate()

 animate()を使えば、任意のCSSプロパティの値を徐々に変化させることで、さまざまなアニメーションエフェクトを作成できます。animate(...)の括弧内には、CSSプロパティ(プロパティ名と値)、アニメーションのスピード、動きのスタイル(easing)、コールバック関数を指定します。


$(セレクター).animate(値を変更したいCSSプロパティ, スピード, 動き, コールバック関数)


 設定できるCSSプロパティは、heighttopopacityのように、数値(px/em/%)で表せるものに限り、background-colorのように数値以外の値を指定するものには対応していません。CSSプロパティの書き方はjQueryの css() で複数のCSSプロパティを同時に設定する場合と同じです(関連記事)。プロパティ名と値を :(コロン)でつなげ、値は "(ダブルクォーテーション)で囲みます。CSSのプロパティ名に -(ハイフン)が含まれる場合はハイフンを削除し、その後に続く最初のアルファベットを大文字に変更します。複数のCSSプロパティは、グループセレクターのように ,(カンマ)でつなげます。

 動きのスタイルには、「linear」または「swing」を設定できます。linearは常に一定の速度で、swingは最初ゆっくり・後半は速くCSSプロパティの値を変更します。


■画像を左右にスライドして切り換えるサンプル

 サンプル10は、img要素がクリックされると、2枚の画像を左右にスライドさせて切り換えます。

 div要素はあらかじめCSSでwidth:400px; height:267px;とサイズを指定しておき、領域外に表示される要素は非表示になるように overflow:hidden; を設定します。div要素の内側にあるp要素には、2枚の画像(flower.jpg/building.jpg)を横に並べたときにちょうど収まるサイズ(width:800px; height:267px;)を設定します。

 jQueryのスクリプトでは、id属性がflowerの要素がクリックされたときに、animate()p要素のmargin-leftプロパティの値を-400pxに変更するイベント処理を記述します。p要素の位置だけが左に400ピクセル移動し、div要素の表示領域は変わらないため、画像がスライドしながら切り替わっているように見える、というわけです。また、id属性がbuildingの要素がクリックされたときには、margin-leftプロパティの値を0pxに変更し、元の画像に切り替わるように設定しています。

サンプル10(CSS部分)


p{
    width:800px;
    height:267px;
    margin:0;
}
div{
    width:400px;
    height:267px;
    overflow:hidden;
}


サンプル10(スクリプト部分)


$(function(){
    $("#flower").click(function(){
        $("p:not(:animated)").animate({
            marginLeft : "-400px" , 
        },"slow","swing")
    })
    $("#building").click(function(){
        $("p:not(:animated)").animate({
            marginLeft : "0" , 
        },"slow","swing")
    })
})


サンプル10(HTML部分)


<div><p>
    <img src="flower.jpg" alt="flower" id="flower" />
    <img src="building.jpg" alt="building"
</p></div>


サンプル10(実行結果)

サンプル10の実行結果
サンプル10の実行結果
スライドしながら画像が切り替わるアニメーション

 animate()は、サンプル10のように、CSSを理解していればアイデア次第でさまざまなアニメーションエフェクトを作成できます。より実践的な使い方は今後の連載でも触れていく予定ですが、ぜひご自分でも試してみてください。


アニメーションエフェクト関連の命令のまとめ

 最後に、今回の記事で紹介したjQueryのアニメーションエフェクト関連の命令を表にまとめます。

命令 意味
show(...) 要素を徐々に表示する
hide(...) 要素を徐々に非表示にする
toggle(...) 要素の表示/非表示を徐々に切り換える
slideDown(...) 要素をスライドアニメーションで表示する
slideUp(...) 要素をスライドアニメーションで非表示にする
slideToggle(...) 要素の表示/非表示をスライドアニメーションで切り換える
fadeIn(...) 要素をフェードインで表示する
fadeOut(...) 要素フェードアウトで非表示にする
fadeTo(...) 要素の透明度を指定した値に徐々に変更する
animate(...) 任意のCSSプロパティの値を徐々に変更する

 本連載では、セレクターの記述方法からイベントの処理、HTML/CSSやフォームの操作まで、さまざまjQueryの機能について解説してきました。次回からは実際のWeb制作でjQueryを活用する方法について、具体的なサンプルを作りながら紹介してきます。ご期待ください。


著者:西畑一馬(にしはた かずま)

著者写真

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」(共著、毎日コミュニケーションズ刊)がある。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング