jQueryエフェクト-アニメーション
jQueryを使用すると、カスタムアニメーションを作成できます。
jQueryアニメーション-animate（）メソッド
jQueryanimate()メソッドは、カスタムアニメーションを作成するために使用されます。
構文：
$(selector).animate({params},speed,callback);
必要なparamsパラメーターは、アニメーション化するCSSプロパティを定義します。
オプションの速度パラメータは、効果の持続時間を指定します。次の値を取ることができます：「遅い」、「速い」、またはミリ秒。
オプションのコールバックパラメータは、アニメーションの完了後に実行される関数です。
次の例は、メソッドの簡単な使用animate()法を示しています。250pxの左側のプロパティに到達するまで、<div>要素を右に移動します。
例
$("button").click(function(){
$("div").animate({left: '250px'});
});
デフォルトでは、すべてのHTML要素は静的な位置にあり、移動することはできません。
位置を操作するには、最初に要素のCSS位置プロパティを相対、固定、または絶対に設定することを忘れないでください。
jQuery animate（）-複数のプロパティを操作する
複数のプロパティを同時にアニメーション化できることに注意してください。
例
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
animate（）メソッドですべてのCSSプロパティを操作することは可能ですか？
はい、ほとんど！ただし、覚えておくべき重要なことが1つあります。animate（）メソッドで使用する場合は、すべてのプロパティ名をキャメルケースにする必要があります。padding-leftの代わりにpaddingLeft、margin-rightの代わりにmarginRightなどを記述する必要があります。
また、カラーアニメーションはコアjQueryライブラリに含まれていません。
色をアニメーション化する場合は
、jQuery.comからColorAnimationsプラグインをダウンロードする必要があります。
jQuery animate（）-相対値の使用
相対値を定義することもできます（値は要素の現在の値に相対的です）。これは、値の前に+ =または-=を置くことによって行われます。
例
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate（）-事前定義された値の使用
プロパティのアニメーション値を「show」、「hide」、または「」として指定することもできますtoggle。
例
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate（）-キュー機能を使用します
デフォルトでは、jQueryにはアニメーション用のキュー機能が付属しています。
これは、複数の呼び出しを次々に書き込む場合animate()、jQueryはこれらのメソッド呼び出しを使用して「内部」キューを作成することを意味します。次に、アニメーション呼び出しを1つずつ実行します。
したがって、異なるアニメーションを次々に実行したい場合は、キュー機能を利用します。
例1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
次の例では、最初に<div>要素を右に移動してから、テキストのフォントサイズを大きくします。
例2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQueryの演習
jQueryエフェクトリファレンス
すべてのjQueryエフェクトの完全な概要については、 jQueryエフェクトリファレンスにアクセスしてください。