jQuery逆引きリファレンス
アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）
各種アニメーションメソッドで、アニメーションを直列／並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
animateメソッド、fadeIn／fadeOutなどのアニメーションメソッドでは、それぞれ引数に「パラメーター名: 値」形式のハッシュを渡すことで、細かなパラメーターを指定することもできます。
［構文］animateメソッド（第2構文）
animate(props, opts)
- props： アニメーション定義（「スタイルプロパティ: 値」のハッシュ）
- opts： 動作オプション（「パラメーター名: 値」のハッシュ）
［構文］アニメーションメソッド（第2構文）
method(opts)
- opts： 動作オプション（「パラメーター名: 値」のハッシュ）
以下では、引数optsで利用できる主なパラメーターをまとめます。
| パラメーター名 | 概要 |
|---|---|
| duration | アニメーションの再生時間（ミリ秒） |
| easing | 変化の度合い（イージング） |
| specialEasing | スタイルプロパティの単位にイージングを設定 |
| queue | アニメーションをキューに追加するか |
| step | アニメーションの再生中に連続して呼び出されるコールバック関数 |
| complete | アニメーションの終了時に実行するコールバック関数 |
このうち、duration／easing／completeについては、上記2つのTIPSで紹介した構文でも実装できるものなので、本稿では残るspecialEasing／queue／stepについて触れていきます。
アニメーションを直列／並列に実行する
アニメーションメソッドをメソッドチェーンで連結した場合、デフォルトでは順番に実行されます。これを並列に実行させたい場合、queueパラメーターにfalseを指定します。
例えば以下は、画像に対して、スライドアップ／フェードアウト効果を同時に実行する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="logo">
<img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#logo')
.slideUp({
duration: 3000,
queue: false
})
.fadeOut({
duration: 3000,
queue: false
});
});
</script>
</body>
</html>
|
アニメーションが並列実行される
アニメーションの処理を追跡する
stepパラメーターを利用することで、アニメーションの処理ステップごとにコールバック関数を実行できます。例えば以下は、画像を拡大する過程で、heightプロパティの変化を出力する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo"
src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
<div>現在値：<span id="current"></span></div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#logo').animate(
{
height: '300px'
},
{
duration: 10000,
step: function(step) {
$('#current').text(step);
}
});
});
</script>
</body>
</html>
|
アニメーションの処理ごとにコールバック関数が呼び出される
step関数は、引数として現在値（ここではheightプロパティの値）を受け取りますので、ここでは、この値を<span id="current">要素に表示しています。
プロパティ単位にイージングを設定する
specialEasingパラメーターを利用することで、「プロパティ名: イージング名」のハッシュ形式で、スタイルプロパティの単位にイージング（＝変化の度合い）を設定できます。
例えば以下は、画像を非表示にする際にwidth（幅）、height（高さ）それぞれに対して異なるイージングを指定した例です。jQuery標準で利用できるイージングは限られていますので、ここではjQuery UIもインポートし、拡張されたイージングを利用しています。jQuery UIで提供されるイージングについては、公式ページにある各種「Easings」のグラフを参照してください。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo" src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$('#logo').hide({
duration: 8000,
specialEasing: {
width: 'easeInBounce',
height: 'easeOutBack'
}
});
});
</script>
</body>
</html>
|
処理対象：フェード カテゴリ：アニメーション
処理対象：スライド カテゴリ：アニメーション
API：.show()／.hide() カテゴリ：Effects（エフェクト） > Basics
API：.fadeIn()／.fadeOut() カテゴリ：Effects（エフェクト） > Fading
API：.slideUp()／.slideDown() カテゴリ：Effects（エフェクト） > Sliding
API：.animate() カテゴリ：Effects（エフェクト） > Custom
※以下では、本稿の前後を合わせて5回分（第25回～第29回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
25. 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
27. 【現在、表示中】≫ アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）
各種アニメーションメソッドで、アニメーションを直列／並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
28. 要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。
29. JavaScriptとHTMLを明確に分離するには？（data）
jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。
