hover jquery dibatalkan dan kemudian dilaksanakan

Dalam reka bentuk web, jQuery dalam perpustakaan JavaScript sering digunakan untuk mencapai pelbagai kesan. Antaranya, acara hover ialah acara yang kerap digunakan, yang boleh melaksanakan kesan khas apabila tetikus sedang berlegar. Walau bagaimanapun, apabila melaksanakan kesan khas tertentu, kita perlu membatalkan operasi sebelumnya dalam acara tuding dan kemudian melakukan operasi baharu. Jadi, bagaimana untuk membatalkan dan kemudian melaksanakan hover dalam jQuery?

1. Penggunaan asas acara hover

Dalam jQuery, menggunakan acara hover adalah sangat mudah Anda hanya perlu menggunakan kod berikut:

$('selector').hover(function() {
  // 如果想要执行的操作
}, function() {
  // 如果想要取消的操作
});

Antaranya, pemilih bermaksud. untuk mengikat Fungsi pertama mewakili tindakan yang akan dilakukan apabila tetikus melayang di atas elemen, dan fungsi kedua mewakili tindakan yang akan dilakukan apabila tetikus bergerak keluar dari elemen.

2. Laksanakan selepas membatalkan tuding

Kadangkala, kita perlu membatalkan operasi sebelumnya dalam acara tuding dan melakukan operasi baharu selepas itu. Senario biasa ialah apabila pengguna menggerakkan tetikus dengan cepat, mereka perlu membatalkan operasi sebelumnya dan kemudian melakukan operasi baharu. Pada masa ini, kita boleh menggunakan kaedah stop() dan delay() dalam jQuery untuk mencapai ini.

Kaedah stop() digunakan untuk menghentikan animasi atau kesan yang sedang berjalan, dan kaedah delay() digunakan untuk menangguhkan pelaksanaan operasi Gabungan kedua-dua kaedah ini boleh mencapai kesan pelaksanaan operasi selepas hover dibatalkan.

Berikut ialah contoh kod:

var timeoutId;
$('selector').hover(function() {
  // 如果想要执行的操作
  $(this).stop().animate({ width: '100px' }, 500);
  clearTimeout(timeoutId);
}, function() {
  // 如果想要取消的操作
  timeoutId = setTimeout(function() {
    $(this).stop().animate({ width: '50px' }, 500);
  }, 500);
});

Dalam kod ini, kami menggunakan pembolehubah timeoutId untuk menyimpan ID pemasa Apabila tetikus bergerak keluar dari elemen, tetapkan pemasa kepada lakukan pengurangan selepas operasi 500ms, jika tetikus memasuki elemen sekali lagi dalam tempoh ini, pemasa dikosongkan dan operasi zum dilakukan.

3. Ringkasan

Untuk melaksanakan pembatalan dan pelaksanaan semula acara hover dalam jQuery, anda perlu menggunakan gabungan kaedah stop() dan delay(), yang boleh memastikan pembatalan biasa apabila tetikus bergerak dengan pantas pada operasi sebelumnya, dan lakukan operasi baharu dengan betul selepas itu. Kaedah ini sangat biasa dalam reka bentuk web dan memerlukan lebih banyak pengumpulan dan latihan.

Atas ialah kandungan terperinci hover jquery dibatalkan dan kemudian dilaksanakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!