最新のWeb開発のチュートリアル
 

jQuery効果 - アニメーション

❮前 次の章❯

jQueryのanimate()メソッドは、カスタムアニメーションを作成することができます。



jQueryの

jQueryのアニメーション- animate()メソッド

jQueryのanimate()メソッドは、カスタムアニメーションを作成するために使用されます。

構文：

$(selector).animate({params},speed,callback);

必要なのparamsパラメータをアニメーション化するためにCSSプロパティを定義します。

オプションの速度パラメータは、効果の持続時間を指定します。 それは次の値を取ることができます： "slow", "fast" 、またはミリ秒。

オプションのコールバックパラメータは、アニメーションが完了した後に実行される機能です。

次の例は、単純な使用を示しているanimate()メソッドを、 それは移動<div>それは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'
    });
}); 
»それを自分で試してみてください

それが持つすべてのCSSプロパティを操作することが可能であるanimate()メソッド？

はい、ほとんど！ で使用する場合、すべてのプロパティ名はキャメルケースである必要があります。しかし、覚えておくべき一つの重要な事があるanimate()メソッドは：あなたが作成する必要がありますpaddingLeftするのではなく、 padding-left, marginRightの代わりにmargin-right 、というように。

また、色のアニメーションは、コアjQueryライブラリに含まれていません。
あなたは色をアニメーション化したい場合は、ダウンロードする必要がカラーアニメーションプラグインを jQuery.comから。

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

$("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");
}); 
»それを自分で試してみてください

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4»

jQueryのエフェクトリファレンス

すべてのjQueryの効果の完全な概要については、当社をご覧くださいjQueryのエフェクトリファレンス 。


❮前 次の章❯