jQuery エフェクト - アニメーション
- 前のページ jQuery スライド
- 次のページ jQuery stop()
jQuery animate()メソッドはカスタムアニメーションを作成することができます。
効果デモ
jQuery アニメーション - animate()メソッド
jQuery animate()メソッドはカスタムアニメーションを作成するために使用されます。
構文：
$(selector).animate({params},speed,callback);
必須の params 引数はアニメーションを形成するCSS属性を定義します。
オプションの speed 引数は効果の持続時間を指定します。以下の値を取ることができます："slow"、"fast"またはミリ秒。
オプションの callback 引数はアニメーションが完了した後に実行される関数の名前です。
以下の例では、animate()メソッドの簡単な使用法を示しています；このメソッドは<div>要素を左に移動し、left属性が250ピクセルになるまで移動します：
例
$("button").click(function(){
$("div").animate({left:'250px'});
);
ヒント：デフォルトでは、すべてのHTML要素には静的な位置があり、移動することができません。
位置を操作する場合は、まず要素のCSS position属性をrelative、fixed、またはabsoluteに設定する必要があります！
jQuery animate() - 複数の属性の操作
アニメーション生成の過程で、複数の属性を同時に使用できます：
例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
);
);
ヒント：animate()メソッドですべてのCSS属性を操作できますか？
はい、ほぼできます！ただし、重要なことに注意を払う必要があります：animate()を使用する際には、すべての属性名をキャメルケース記法で書かなければなりません。例えば、padding-leftではなくpaddingLeft、margin-rightではなくmarginRightなどです。
また、色彩アニメーションは、コアjQueryライブラリに含まれていません。
色のアニメーションを作成するには、jQuery.comからColor Animationsプラグインをダウンロードする必要があります。
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() - クエueue機能を使用
デフォルトで、jQueryはアニメーションのためのクエueue機能を提供しています。
これは、animate()コールを連続して書くと、jQueryがこれらのメソッドコールを含む「内部」クエueueを作成し、順次これらのanimateコールを実行するということを意味します。
例 1
別々のアニメーションを実行したい場合、クエueue機能を使用する必要があります：
$("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");
);
例 2
以下の例では、<div>要素を右側に移動し、テキストのサイズを大きくします：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
);
- 前のページ jQuery スライド
- 次のページ jQuery stop()
