Contoh penggunaan kaedah queue() dalam jQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan kaedah queue() dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kaedah ini boleh memaparkan atau mengendalikan baris gilir fungsi yang dilaksanakan pada elemen padanan.

Kaedah ini mungkin tidak terlalu kerap digunakan, tetapi ia adalah sangat penting berikut adalah contoh cara menggunakan kaedah ini. Kesan berbeza bergantung pada parameter kaedah. Nota: Adalah disyorkan untuk belajar bersama-sama dengan fungsi dequeue(). Struktur tatabahasa 1:

Salin kod Kod adalah seperti berikut: $("selector").queue(queueName) Senarai parameter:

<table class="t_table" cellspacing="0" style="border-bottom: rgb(227,237,245) 1px solid; border-left: rgb(227,237,245) 1px solid; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; width: 654px; border-collapse: collapse; font: 14px/21px Tahoma, 'Microsoft Yahei', Simsun; word-wrap: break-word; white-space: normal; empty-cells: show; table-layout: auto; letter-spacing: normal; height: 61px; color: rgb(68,68,68); border-top: rgb(227,237,245) 1px solid; border-right: rgb(227,237,245) 1px solid; word-spacing: 0px; -webkit-text-stroke-width: 0px"> 参数 描述 queueName 可选。 第一个匹配元素上动画队列的名称，默认值是“fx”。 Apabila tiada parameter, ia boleh mengembalikan baris gilir animasi pada elemen padanan pertama.

Contoh kod:

Salin kod Kod adalah seperti berikut: queue() function-Script Home .kotak{ lebar:300px; ketinggian:150px; } .mytest{ lebar:50px; ketinggian:50px; warna latar:hijau; kedudukan:mutlak; kiri:0px; paparan:tiada; saiz fon:12px; } $(dokumen).sedia(fungsi(){ $("#do").klik(function(){ $(".mytest").show(1000); $(".mytest").animate({left:" =200"},3000); $(".mytest").animate({top:" =50"},2000); $(".mytest").text("Animasi selesai"); }) $("#count").klik(function(){ alert($(".mytest").queue().panjang) }) }) Klik untuk memulakan animasi Hitung bilangan fungsi dalam baris gilir

Memandangkan fungsi baris gilir() tidak mempunyai parameter, nilai pulangan ialah baris gilir animasi pada elemen padanan pertama, iaitu baris gilir animasi elemen div Apabila butang kedua diklik, nombor dalam baris gilir semasa boleh dikira dalam masa nyata Bilangan animasi. Tatabahasa 2:

Salin kod Kod adalah seperti berikut: $("selector").queue(callback()) Anda boleh menambah fungsi pada penghujung baris gilir fungsi elemen padanan.

Senarai parameter:

<table class="t_table" cellspacing="0" style="border-bottom: rgb(227,237,245) 1px solid; border-left: rgb(227,237,245) 1px solid; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; width: 663px; border-collapse: collapse; font: 14px/21px Tahoma, 'Microsoft Yahei', Simsun; word-wrap: break-word; white-space: normal; empty-cells: show; table-layout: auto; letter-spacing: normal; height: 61px; color: rgb(68,68,68); border-top: rgb(227,237,245) 1px solid; border-right: rgb(227,237,245) 1px solid; word-spacing: 0px; -webkit-text-stroke-width: 0px"> 参数 描述 callback() 匹配元素上的函数队列最后面要添加的函数。 Dalam contoh Tatabahasa 1, anda mungkin melihat masalah, iaitu, kami berharap untuk menambah perkataan "animasi selesai" pada div selepas semua animasi selesai, tetapi berdasarkan prestasi sebenar operasi, tidak begitu. . Sebab utama ialah fungsi animasi show() dan animate() akan ditambahkan pada baris gilir animasi fx secara lalai, dan kaedah text() bukan fungsi animasi, jadi ia tidak akan ditambahkan pada baris gilir fx dan akan dilaksanakan terlebih dahulu. Kemudian anda boleh memasukkan kaedah text() dengan menggunakan fungsi ini.

Contoh kod:

Contoh 1:

Salin kod Kod adalah seperti berikut: queue() function-Script Home .kotak{ lebar:300px; ketinggian:150px; } .mytest{ lebar:50px; ketinggian:50px; warna latar:hijau; kedudukan:mutlak; kiri:0px; paparan:tiada; saiz fon:12px; } $(dokumen).sedia(fungsi(){ $("#do").klik(function(){ $(".mytest").show(1000); $(".mytest").animate({left:" =200"},3000); $(".mytest").animate({top:" =50"},2000); $(".mytest").queue(function(){$(this).text("Animasi selesai")}); }) $("#count").klik(function(){ alert($(".mytest").queue().panjang) }) }) Klik untuk memulakan animasi Hitung bilangan fungsi dalam baris gilir

Kod di atas mencapai kesan akhir yang kami perlukan.

Contoh 2:

Salin kod Kod adalah seperti berikut: queue() function-Script Home .kotak{ lebar:300px; ketinggian:150px; } .mytest{ lebar:50px; ketinggian:50px; warna latar:hijau; kedudukan:mutlak; kiri:0px; paparan:tiada; saiz fon:12px; } $(dokumen).sedia(fungsi(){ $("#do").klik(function(){ $(".mytest").show(1000); $(".mytest").animate({left:" =200"},3000); $(".mytest").animate({top:" =50"},2000); $(".mytest").queue(function(){ $(this).text("Animasi akan diteruskan"); }); $(".mytest").animate({left:"-=200"},3000); }) $("#count").klik(function(){ alert($(".mytest").queue().panjang) }) }) Klik untuk memulakan animasi Hitung bilangan fungsi dalam baris gilir

Dalam kod di atas, kami ingin melaksanakan animasi tersuai selepas melaksanakan kaedah text(), tetapi prestasinya tidak seperti ini, dan animasi tersuai terakhir tidak dilaksanakan. Kod diubah suai seperti berikut:

Salin kod Kod adalah seperti berikut: queue() function-Script Home .kotak{ lebar:300px; ketinggian:150px; } .mytest{ lebar:50px; ketinggian:50px; warna latar:hijau; kedudukan:mutlak; kiri:0px; paparan:tiada; saiz fon:12px; } $(dokumen).sedia(fungsi(){ $("#do").klik(function(){ $(".mytest").show(1000); $(".mytest").animate({left:" =200"},3000); $(".mytest").animate({top:" =50"},2000); $(".mytest").queue(function(){ $(this).text("Animasi akan diteruskan"); $(this).dequeue(); }); $(".mytest").animate({left:"-=200"},3000); }) $("#count").klik(function(){ alert($(".mytest").queue().panjang) }) }) Klik untuk memulakan animasi Hitung bilangan fungsi dalam baris gilir

Kod di atas memenuhi keperluan kami, tambahkan: pada kod

Salin kod Kod adalah seperti berikut: $(this).dequeue(); Maksudnya, apabila menambah fungsi melalui baris gilir(), kita harus memastikan bahawa .dequeue() akhirnya dipanggil supaya fungsi baris gilir seterusnya boleh dilaksanakan.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

参数	描述
queueName	可选。第一个匹配元素上动画队列的名称，默认值是“fx”。