Contoh tutorial fungsi queue() dalam jQuery_jquery

Jika objek jQuery semasa sepadan dengan berbilang elemen: apabila mendapatkan baris gilir, hanya dapatkan baris gilir pada elemen padanan pertama apabila menetapkan baris gilir (ganti gilir, tambah fungsi), tetapkannya secara berasingan untuk setiap elemen padanan.
Fungsi ini tergolong dalam objek jQuery (contoh). Jika anda perlu mengalih keluar dan melaksanakan fungsi pertama dalam baris gilir, gunakan fungsi dequeue(). Anda juga boleh menggunakan fungsi clearQueue() untuk mengosongkan baris gilir yang ditentukan.

Tatabahasa
Fungsi ini baharu dalam jQuery 1.2. Fungsi queue() mempunyai dua kegunaan berikut:

Penggunaan 1:

jQueryObject.queue( [ queueName ] [, newQueue ] )

Jika tiada parameter dinyatakan atau hanya parameter queueName ditentukan, ini bermakna untuk mendapatkan baris gilir fungsi dengan nama yang ditentukan. Jika parameter newQueue ditentukan, ini bermakna baris gilir baharu newQueue digunakan untuk menetapkan (menggantikan) semua kandungan dalam baris gilir semasa.

Penggunaan 2:

jQueryObject.queue( [ queueName ,] callback )

Menambah fungsi yang ditentukan pada baris gilir yang ditentukan (akhir).
Nota: Semua operasi tetapan bagi fungsi baris gilir() adalah untuk setiap elemen yang dipadankan dengan objek jQuery semasa semua operasi membaca hanya untuk elemen padanan pertama.

Parameter
Sila cari parameter yang sepadan berdasarkan nama parameter yang ditakrifkan dalam bahagian sintaks sebelumnya.
queueName: nama pilihan/Queue ditentukan oleh jenis String, lalai kepada "fx" (mewakili baris gilir kesan animasi standard dalam jQuery).
newQueue: Jenis pilihan/Array Baris baharu yang digunakan untuk menggantikan kandungan baris gilir semasa.
panggil balik: Fungsi yang ditentukan oleh jenis Fungsi akan dilampirkan pada baris gilir. Fungsi ini mempunyai parameter fungsi yang dipanggil untuk mengalih keluar dan melaksanakan fungsi pertama dalam baris gilir.

Nilai pulangan
Nilai pulangan bagi fungsi baris gilir() adalah daripada jenis Array/jQuery Jenis nilai pulangan bergantung pada sama ada fungsi baris gilir() semasa menjalankan operasi dapatkan atau operasi yang ditetapkan.
Jika fungsi baris gilir () melakukan operasi penetapan (menggantikan baris gilir, menambahkan fungsi), ia mengembalikan objek jQuery semasa itu sendiri jika ia adalah operasi mendapatkan semula, ia mengembalikan baris gilir (tatasusunan) fungsi yang diperolehi;
Jika objek jQuery semasa sepadan dengan berbilang elemen, apabila membaca data, fungsi queue() hanya menggunakan elemen padanan pertama.

Contoh:
1. jQuery memberikan kami fungsi queue() untuk memasukkan beberapa kod yang anda perlukan ke dalam baris gilir

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();      
  }).show('slow');
});

2. Barisan tersuai

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
});

Tetapi ini hanyalah kod ini Apabila anda benar-benar menambahkannya ke halaman web dan cuba menjalankannya, anda akan mendapati bahawa ia bukan "apa yang anda lihat ialah apa yang anda dapat" dan ia tidak akan memberi kesan sama sekali.

Selepas pengubahsuaian:

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

Takrifan umum dequeue() ialah "memadam fungsi teratas dalam baris gilir dan melaksanakannya". Saya tidak bersetuju dengan perkataan "padam", tetapi lebih suka "buang". Sebenarnya, fungsi fungsi ini adalah seperti penunjuk kepada baris gilir dalam struktur data Selepas fungsi sebelumnya dalam baris gilir dilaksanakan, yang terakhir fungsi barisan dikeluarkan fungsi di bahagian atas.

3. baris gilir: palsu

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

Dalam 1000 milisaat pertama, hanya baris gilir "fx" yang mengawal ketinggian dilaksanakan, dan kemudian dalam 1000 milisaat seterusnya, baris gilir "fader" yang mengawal kelegapan dan "fx" yang mengawal ketinggian akan dilaksanakan selari. Keselarian di sini ialah queue:false

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

4. Dapatkan panjang giliran
Sebagai contoh, gunakan nama baris gilir untuk mendapatkan panjang elemen padanan:

var $queue=$("div").queue('fx');

Jelas sekali, dapatkan baris gilir bernama 'fx' Jika anda ingin mendapatkan panjangnya:

var $length=$('div').queue('fx').length;

Perhatikan bahawa panjang baris gilir di sini hanyalah panjang baris gilir elemen padanan yang belum dijalankan Apabila animasi selesai dijalankan, panjang baris gilir akan dikurangkan secara automatik kepada 0

5. Barisan gantian

$('div').queue('fx',function(){
    $('div').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('div').queue('fx2',function(){
    $('div').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定义fx2

Dua baris gilir ditakrifkan di sini, satu baris gilir perlahan, iaitu 'fx' lalai, dan satu lagi baris gilir pantas 'fx2'

Apabila butang diklik:

$('input').click(function(){
  $('div').queue('fx',fx2);
});