Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > jquery berhenti menghidupkan

jquery berhenti menghidupkan

WBOY
Lepaskan: 2023-05-18 17:31:40
asal
1662 orang telah melayarinya

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan web Fungsi animasinya yang fleksibel boleh meningkatkan pengalaman pengguna tapak web dengan berkesan. Dalam pembangunan sebenar, banyak pembangun telah menghadapi situasi di mana mereka perlu menghentikan animasi yang dilaksanakan. Artikel ini akan memperkenalkan cara menghentikan kesan animasi jQuery.

1 Gunakan kaedah stop()

jQuery menyediakan kaedah stop() yang boleh digunakan untuk menghentikan kesan animasi yang sedang berjalan. Sintaks kaedah ini adalah seperti berikut:

$(selector).stop(stopAll, gotoEnd);
Salin selepas log masuk

Antaranya, pemilih ialah elemen yang akan dianimasikan stopAll ialah parameter pilihan yang digunakan untuk menentukan sama ada untuk menghentikan semua kesan animasi yang sedang dijalankan (nilai lalai adalah palsu, iaitu, hanya Hentikan animasi semasa); gotoEnd ialah satu lagi parameter pilihan yang digunakan untuk menentukan tempat untuk menghentikan kesan animasi (nilai lalai adalah palsu, yang bermaksud berhenti pada kedudukan semasa).

Berikut ialah contoh mudah yang menunjukkan cara menghentikan animasi berjalan:

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop();
    });
});
Salin selepas log masuk

Dalam contoh ini, apabila pengguna mengklik butang, elemen dengan id "kotak" akan menjadi Animasi kesan yang berlangsung selama 5 saat dan bergerak ke kiri. Apabila pengguna mengklik pada elemen dengan id "berhenti", animasi akan dihentikan.

2. Gunakan kaedah clearQueue()

Selain kaedah stop(), jQuery juga menyediakan kaedah clearQueue() untuk mengosongkan baris gilir pada elemen. Biasanya, apabila kesan animasi dihentikan, semua animasi pada baris gilir dikosongkan. Walau bagaimanapun, jika anda tidak mahu menghentikan animasi semasa, tetapi ingin mengosongkan kesan animasi lain, maka kaedah clearQueue() akan sangat berguna.

Sintaks kaedah ini adalah seperti berikut:

$(selector).clearQueue(queueName);
Salin selepas log masuk

Antaranya, queueName ialah parameter pilihan yang digunakan untuk menentukan nama baris gilir yang hendak dikosongkan. Jika parameter ini tidak dinyatakan, semua kesan animasi pada baris gilir lalai akan dikosongkan.

Berikut ialah contoh yang menunjukkan cara mengosongkan kesan animasi lain selain animasi semasa apabila menghentikan animasi:

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
        $("#box").animate({top: '100px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop(false, true).clearQueue();
    });
});
Salin selepas log masuk

Dalam contoh ini, apabila pengguna mengklik butang, id Lakukan animasi kesan untuk elemen "kotak" mula-mula bergerak ke kiri dan kemudian bergerak ke bawah. Apabila pengguna mengklik pada elemen dengan id "berhenti", animasi pergerakan ke bawah akan dihentikan, tetapi kesan animasi pergerakan kiri akan dikekalkan. Pada masa yang sama, kesan animasi lain juga dikosongkan.

Ringkasan:

Jika anda ingin menghentikan kesan animasi yang sedang berjalan, anda boleh menggunakan kaedah stop() jika anda ingin mengosongkan kesan animasi lain dalam baris gilir apabila menghentikan animasi, anda boleh menggunakan kaedah clearQueue(). Dalam pembangunan sebenar, pilih kaedah yang berbeza mengikut keperluan untuk mencapai matlamat anda.

Atas ialah kandungan terperinci jquery berhenti menghidupkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan