jQuery-data - queue() -menetelmä

jQuery 数据参考手册

Esimerkki

Näytä jonon pituus:

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

亲自试一试

Määritelmä ja käyttö

queue() -menetelmä näyttää tai käsittelee matchaustulos-elementillä suoritettavaa funktion joukkoa.

Syntaksi

.queue(queueName)
Parametrit Kuvaus
queueName Valinnainen. Merkkijonovaranto, joka sisältää sarjan nimen. Oletus on fx, vakiovaikutussarja.

Toiminnallinen jono

queue() -menetelmä käsittelee matchaustulos-elementillä suoritettavaa funktion joukkoa.

Syntaksi

.queue(queueName,newQueue)
Parametrit Kuvaus
queueName Valinnainen. Merkkijonovaranto, joka sisältää sarjan nimen. Oletus on fx, vakiovaikutussarja.

Yksityiskohtainen selitys

Jokainen elementti voi omistaa yhden tai useamman jQuery:n lisäämän funktion joukon. Useimmissa sovelluksissa käytetään vain yhtä joukkoa (nimeltä fx). Jono suorittaa elementillä tehtäväketjun asynkronisesti, eikä se lopeta ohjelman suorittamista. Yksi tyypillinen esimerkki on useiden animaatiomenetelmien kutsuminen elementille. Esimerkiksi:

$('#foo').slideUp().fadeIn();

当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用。

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});;

等价于：

$('#foo').slideUp(function() {
  alert('Animation complete.');
);

请注意，当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。

例子 1

对自定义函数进行队列操作：

$(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();
);

亲自试一试

例子 2

设置队列数组来删除队列：

$("#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();
);

亲自试一试

jQuery 数据参考手册