Latest web development tutorials

jQueryの効果 - アニメーション

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



jQueryの

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

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

構文:

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

必須のpar​​amsパラメータは、CSSプロパティのアニメーションの生成を定義します。

オプションの速度パラメータは、効果の持続時間を指定します。 それは次の値をとることができる:「遅い」、「速い」、またはミリ秒。

オプションのコールバックパラメータが完了した後に実行する関数の名前です。

次の例は、単純なアプリケーションのanimate()メソッドを示しています。 これは250ピクセルを移動するには右に、<div>要素:

$("button").click(function(){
$("div").animate({left:'250px'});
});

»をお試しください

ランプ デフォルトでは、すべてのHTML要素は、静的な位置を持って移動することはできません。
動作位置については、相対的な固定または絶対的に設定された第1の要素のCSSの位置属性を覚えています!


jQueryのアニメーション() - 複数のプロパティを操作します

アニメーションを生成するプロセスは、複数のプロパティを使用できることに注意してください:

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

»をお試しください

ランプあなたは、すべてのCSS属性を操作する()メソッドをアニメーション化することができますか?

はい、ほとんど! しかし、重要なことは覚えて:アニメーションを()を使用する場合は、キャメル表記を使用する必要がありますすべての属性の名前を書き、例えば、代わりに使用する必要がありますpaddingLeftパディング左、代わりにmarginRightマージン右を使用しての、など。

同時に、色のアニメーションは、コアjQueryライブラリに含まれていません。

あなたは色のアニメーションを生成する必要がある場合は、あなたがする必要がありjquery.comダウンロードカラーアニメーションの プラグインを。



jQueryのアニメーション() - 相対値の使用

また、相対値(値は、要素の現在の値を基準にしている)を定義することができます。 値の前にする必要があります+ =または - =:

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

»をお試しください


()はJQueryアニメーション - 事前に定義された値を使用します

あなたも、「非表示」または「トグル」「ショー」へのアニメーションプロパティの値を入れることができます。

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

»をお試しください


jQueryのアニメーション() - キュー機能を使用します

デフォルトでは、jQueryのアニメーションのためのキューイング機能を提供します。

これは、別のアニメーション()呼び出しの後に複数のを書いた場合、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>要素の次の例では、右100ピクセルに移動し、テキストのサイズを大きくします

例2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

»をお試しください