jQuery1.9(アニメーション効果)学习の——.queue()
6129 ワード
.queue( [queueName ] )
説明:一致する要素で実行された関数列を表示または操作します.
queueName
タイプ:
String
キュー名を含む文字列.デフォルトは
例:
列の長さを表示します.
.queue( [queueName ], newQueue )
説明:一致要素に追加された関数のリストを操作します.
queueName
タイプ:
String
キュー名を含む文字列.デフォルトは
newQueue
タイプ:
Array
現在のキューの内容を置換する関数配列.
.queue( [queueName ], callback( next ) )
queueName
タイプ:
String
キュー名を含む文字列.デフォルトは
callback( next )
タイプ:
Function ()
キューに追加する新しい関数を指定します.関数が呼び出されると、ポップアップ・キューの次の要素が表示されます.
各要素は、jQueryを介して1つまたは複数の関数キューを含むことができる.ほとんどのアプリケーションでは、1つのキュー(アクセス
この文が実行されると、この要素はすぐにスライドアニメーションを開始しますが、グラデーションアニメーションは
この関数の機能は、アニメーションメソッドでコールバック関数が提供されているのと似ていますが、アニメーションの実行時にコールバック関数を指定する必要はありません.
これは次のようなものです.
jQuery 1.4から、キューに関数を追加する場合、その関数に最初のパラメータとして別の関数を入力できます.関数を呼び出すと、関数キューから次のアイテムが自動的にポップアップされ、キュー内の関数の継続が保証されます.次のように使用できます.
例:
Example: Queue a custom function.
Example: Set a queue array to delete the queue.
説明:一致する要素で実行された関数列を表示または操作します.
queueName
タイプ:
String
キュー名を含む文字列.デフォルトは
fx、標準的なアニメーションキュー.例:
列の長さを表示します.
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:60px;
background:green; display:none; }
div.newcolor { background:blue; }
p { color:red; } </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $("div");
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
}
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout(showIt, 100);
}
runIt();
showIt();
</script>
</body>
</html>.queue( [queueName ], newQueue )
説明:一致要素に追加された関数のリストを操作します.
queueName
タイプ:
String
キュー名を含む文字列.デフォルトは
fx、標準的なアニメーションキュー.newQueue
タイプ:
Array
現在のキューの内容を置換する関数配列.
.queue( [queueName ], callback( next ) )
queueName
タイプ:
String
キュー名を含む文字列.デフォルトは
fx、標準的なアニメーションキュー.callback( next )
タイプ:
Function ()
キューに追加する新しい関数を指定します.関数が呼び出されると、ポップアップ・キューの次の要素が表示されます.
各要素は、jQueryを介して1つまたは複数の関数キューを含むことができる.ほとんどのアプリケーションでは、1つのキュー(アクセス
fx)のみが使用される.キューを使用すると、プログラムの実行を終了することなく、要素が一連のアクションに非同期でアクセスできます.典型的な例は、1つの要素上で複数のアニメーションを呼び出す方法で1つの要素を呼び出すことです.例:$('#foo').slideUp().fadeIn();この文が実行されると、この要素はすぐにスライドアニメーションを開始しますが、グラデーションアニメーションは
fx列に配置され、スライドアニメーションが完了した後にのみ実行されます.queue()メソッドを使用すると、この関数キューを直接操作できます.1つのコールバック関数でqueue()にアクセスすることは特に有用である.新しい関数をキューの末端に配置します.jQueryコレクション内の各要素に対してコールバック関数を1回実行します.この関数の機能は、アニメーションメソッドでコールバック関数が提供されているのと似ていますが、アニメーションの実行時にコールバック関数を指定する必要はありません.
$('#foo').slideUp();
$('#foo').queue(function() {
alert('Animation complete.');
$(this).dequeue();
});これは次のようなものです.
$('#foo').slideUp(function() {
alert('Animation complete.');
});.queue()を使用して関数を追加する場合は、関数が最後にjQuery.dequeue()を呼び出すことを保証し、キュー内の他の関数を順番に実行することができます.jQuery 1.4から、キューに関数を追加する場合、その関数に最初のパラメータとして別の関数を入力できます.関数を呼び出すと、関数キューから次のアイテムが自動的にポップアップされ、キュー内の関数の継続が保証されます.次のように使用できます.
$("#test").queue(function(next) {
// Do some stuff...
next();
});例:
Example: Queue a custom function.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click here...
<div></div>
<script>$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});</script>
</body>
</html>Example: Set a queue array to delete the queue.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
});</script>
</body>
</html>