jQuery_jqueryでのアニメーション処理の概要

queue()/dequeue()
これら 2 つのメソッドは、Ajax の XMLHttpRequest オブジェクトと同じように隠蔽されており、一般の人には知られていません。これら 2 つのメソッドは、アニメーションを処理するときに非常に便利です。

のようなコードを書くことがよくあります。

コードをコピー コードは次のとおりです:

$('#test').animate ({
"幅": "300px",
"高さ": "300px",
"不透明度":"1"
});

このように、テスト div の高さ、幅、不透明度を同時に変更する場合は、形状の変更と透明度の変更を分離して実行する必要がある場合があります。 300*300 div にすると、透明度が徐々に変化します。

のように記述する必要があります。

コードをコピー コードは次のとおりです:

$('#test').animate ({
"幅": "300px",
"高さ": "300px",
}, function () {
"$('#test').animate({ "opacity ": "1 " });
});

生徒は、アニメーション プロセスが 10 個ある場合にコードがどのようになるかを想像できます。queue() と dequeue() を使用すると、すべてのプロセス メソッドのキューを作成し、関数を順番に呼び出すことができます。構文を見てください。


queue( [queueName ], newQueue ) オペレーションはキュー メソッド

を実行しようとしています。

最初のパラメータはキュー名です。書かれていない場合、デフォルトは fx

です。

2 番目のパラメーターは、すべてのキュー関数を格納する関数配列にすることも、新しい関数をキューに追加するコールバック関数にすることもできます

dequeue( [queueName ] ) 一致する要素に対してキュー内の次の関数を実行します

このメソッドが呼び出されるたびに、キュー内の次の関数が実行されます

コードをコピー コードは次のとおりです:

var q = [
🎜> $(this).animate({

「 🎜>
関数 next(){
$('#test').dequeue('myQueue');
}

$（ '＃test'）。queue（ 'myqueue'、q）;

上記のコードは、最初にテスト div を 200*200 に変更し、次に 400*400 に変更することができます。各アニメーションはコールバック関数を実行し、キュー内の次のメソッドを呼び出し、2 つのアニメーションが順番に実行されます。実行中に関数を追加したい場合は、次のようにすることができます

コードをコピー

コードは次のとおりです:

var q = [
function () {
$(this).animate({
"width": "200px",
"高さ":"200px"
}, next)
},
function () {
$(this).animate({
"幅": "400px",
"高さ": "400px"
}、次);
}
];

function next(){
$('#test').dequeue('myQueue');
}

$('#test').queue('myQueue', q);
next();
$('#test').queue('myQueue',function () {
$(this).slideUp().dequeue('myQueue');
});

この 2 つの方法は、次の順に実行するためのものです。

clearQueue() /stop()

この方法は主に了取消画を目的としています

clearQueue( [queueName ] ) 将队列中関数数清空

stop( [queue ] [, clearQueue ] [, JumpToEnd ] ) 正在進行中のアニメーションを停止するためのもの

キュー：正在進行中のアニメ队列名

clearQueue：默认值はfalse，否か队列本身も清空

jumpToEnd：默认值是false，是否立即执行完アニメ画

如果想停止刚才アニメ画可以这么写

复制代代码如下:

$('#test').clearQueue('myQueue');

这样写不会不会终停止アニメ画，只今当前アニメ画行完後，不会再调用队列中下一アニメ画（队列被清空了嘛，没有下一个了），如果想立即停止アニメ画，可以这么写

复制代码代码如下:

$('#test').stop();

停止アニメーションを一時停止するか即時実行するかについては、stop()のパラメータを設定する必要があります

slideDown()/slideUp()/slideToggle()

スライド効果は、アニメーション、特にメニューを作成するときによく使用されます。これらの 3 つの機能は非常に単純です。つまり、要素が縮小/伸縮し、自動的に縮小と伸縮が決定されます。しかし、そのパラメータは長さだけでなく、次のこともできます。 add 他のコントロールについては、API の概要を参照してください。これは、slideUp

の例です。

slideUp( [duration ] [, easing ] [, complete ] ) イージングは​​グラデーションメソッドです。duration が書かれていない場合、デフォルトではアニメーションが完了するまでに約 1 秒かかります。 >

スライドアップ(オプション)

オプションで一般的に使用される構成には

が含まれます

期間: アニメーション時間

queue: 上記の

を読めば理解できるでしょう。

ステップ: アニメーション中に属性が変化するたびに実行されます

complete: アニメーションが完了すると実行されます

start: アニメーションの開始時に実行されます

常に: アニメーションが終了するか、予期せず完了に失敗したときに発生します

これら 3 つの関数は、実行時に要素の高さを変更します。sideUp() の実行後、高さは復元され、ダイアログは none に設定されます。

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

fadeIn()/ fadeOut()/ fadeToggle()の使い方はスライドシリーズと似ています、一つずつ説明する必要はありません。要素の透明度を変更するのはこれら 3 つの関数だけです。 fadeOut() 関数の実行後、要素の不透明度が復元され、表示属性が none に設定されます。

fadeTo(duration, opacity [, easing ] [, complete ] ) fadeTo()メソッドはそれほど複雑ではないが、fadeTO()の継続時間と不透明度は省略できないので必ず記述する必要がある

表示()/非表示()/切り替え()

これら3つの機能の使い方はスライドシリーズと同じですが、効果に若干の違いがあります

1. パラメータの持続時間が書かれていない場合、アニメーションなしですぐに実行されます

2. このアニメーションは、高さ、幅、不透明度の属性を同時に変更します

3. Hide() の実行が完了すると、高さ、幅、不透明度の属性が復元され、表示が none に設定されます。

animate()

一部の複雑なアニメーションは、上記の関数に依存しても実現できません。この場合、強力な animate() を使用する方法が 2 つあります。
.animate( プロパティ [, 期間 ] [, イージング ] [, 完了 ] )

ほとんどの属性は説明の必要はありません。属性の値はリテラル、関数、「トグル」、または関数の場合、戻り値が属性に割り当てられます。 jQueryに詳しい学生なら必ず理解できると思います。 「トグル」とは、属性を初期値と最小値の間で切り替えることです。トグルを使用できる属性には、数値属性を含む幅、高さ、不透明度などが含まれます。簡単な表現は = や -= などで、たとえば「width」:「 =10px」のようになります。

コードをコピー コードは次のとおりです:

$( "#block" ).animate ({

width: "70%"、
opacity: 0.4、
marginLeft: "0.6in"、
fontSize: "3em"、
borderWidth: " =10px"
}, 1500 );

コールバック関数が渡された場合、その関数はアニメーションの実行後に呼び出されます

.animate( プロパティ, オプション )

この使用法はより柔軟で、プロパティは前の使用法と同じで、一般的に使用されるオプションは次のとおりです。

期間: アニメーション時間

キュー: 関数キュー

ステップ: 各属性調整のロールバック関数

complete: アニメーションを完了するためのコールバック関数

start: アニメーションの開始時に呼び出されます

常に: アニメーションが終了するか、予期せず完了に失敗したときに発生します

jQuery が使いやすいなら、上記の構成はよく知られていますか?

コードをコピー コードは次のとおりです:

$( "#book" ).animate ({

width: "toggle",
height: "toggle"
}, {
period: 5000,
specialEasing: {
width: "linear",
高さ: "easeOutBounce"
},
complete: function() {
$( this ).after( "

アニメーションが完了しました。

" );
}
} );

hover()

厳密に言えば、これはアニメーション機能ではありませんが、IE の下位バージョンのホバーは多くの要素で機能しないため、多くのアクションは CSS で完了できません。 JavaScript は haver イベントを処理することがよくあります。
.hover( handlerIn(eventObject), handlerOut(eventObject) )

やり方はとても簡単なので詳しくは紹介しませんが、mouseinとmouseoutを一緒に書いても大丈夫です。