独自のアニメーションエフェクトを設定できる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」(共著、毎日コミュニケーションズ刊)がある。
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。