Web制作の現場で使えるjQuery　UIデザイン入門 ― 第11回

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

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

文● 西畑一馬／to-R

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

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


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

　設定できるCSSプロパティは、height／top／opacityのように、数値（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（実行結果）


スライドしながら画像が切り替わるアニメーション

　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」（共著、毎日コミュニケーションズ刊）がある。

前へ 1 2 3 4 5 次へ

ツイートする

カテゴリートップへ