jQuery data - queue() method

jQuery Datos ng Rehersa ng Manwal

Mga halimbawa

Ipakita ang haba ng queue:

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

Subukan ang sarili

Definisyon at paggamit

queue() method ay nagpapakita o gumagawa ng operasyon sa function queue na nagsasagawa sa pinaghahalintulad na elemento.

Gramata

.queue(queueName)
Parametro Paglalarawan
queueName Opisyon. Ang string value na naglalaman ng pangalan ng sequence. Ang default ay fx, ang standard na epekto sequence.

Operasyon sa queue

queue() method ay gumagawa ng operasyon sa function queue na nagsasagawa sa pinaghahalintulad na elemento.

Gramata

.queue(queueName,newQueue)
Parametro Paglalarawan
queueName Opisyon. Ang string value na naglalaman ng pangalan ng sequence. Ang default ay fx, ang standard na epekto sequence.

Detalyadong paglalarawan

Bawat elemento ay mayroong isang hanggang maraming function queue na idinagdag ng jQuery. Sa karamihan ng mga aplikasyon, gamit lamang ang isang queue (na tinatawag na fx). Ang queue ay tumatakbo sa elementong magiging asynchronous ang pagpapatupad ng mga sekvensya ng aksyon, na hindi magtatapos ang epekto ng programa. Ang tipikal na halimbawa ay ang pagpapatupad ng maraming animation method sa elemento. Halimbawa:

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

Kapag inaalis ang pangyayaring ito, ang elemento ay magsisimula agad ang kanyang sliding animation, ngunit ang transition na paglalambing ay ilagay sa queue ng fx, at ito ay tatanggal lamang kapag natapos ang sliding transition.

Ang method na .queue() ay nagbibigay ng kapangyarihan sa amin na gumawa ng pagbabago sa queue ng function. Ang paggamit ng .queue() na may callback function ay lubos na kapaki-pakinabang; ito ay nagbibigay ng kapangyarihan sa amin na ilagay ang bagong function sa dulo ng queue.

Ang katangian na ito ay katulad ng callback function na ibinibigay ng method ng animation, ngunit hindi kailangan mag-set ng callback function habang nagpapatuloy ang animation.

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

Kasamaan sa:

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

Isaalang-alang na, kapag pinapunta sa .queue() ang function, dapat natin tiyakin na tinawagan ang .dequeue() upang matugunan ang susunod na function sa queue.

Halimbawa 1

Gawin ang queue operation sa custom function:

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

Subukan ang sarili

Halimbawa 2

Iset ang array ng queue upang alisin ang queue:

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

Subukan ang sarili

jQuery Datos ng Rehersa ng Manwal