cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kongsi bug_jquery tentang pencetus dan ketinggalan animasi yang berterusan seperti animasi, slaid dan pudar dalam jQuery

Kongsi bug_jquery tentang pencetus dan ketinggalan animasi yang berterusan seperti animasi, slaid dan pudar dalam jQuery

WBOY
WBOYasal
2016-05-16 15:20:341975semak imbas

Gaya saya menulis artikel ialah saya suka bercakap tentang latar belakang masalah dan kecederaan undang-undang pada mulanya:

Oleh kerana saya baru-baru ini ingin memanggil pilihan operasi, saya terfikir untuk menyembunyikannya secara lalai dan memaparkannya apabila tetikus bergerak ke atasnya.

Pada mulanya saya bercadang untuk menambah class="active", yang secara langsung akan mencetuskan tambah apabila tetikus (atau tetikus masuk), dan mengalih keluar apabila tetikus keluar (atau tetikus meninggalkan penyelesaian ini sangat mudah dan praktikal, tetapi pengalamannya mungkin tidak sebegitu bagusnya (ok, saya menggunakan perkataan ini, dan ia terasa begitu rendah serta-merta), jadi saya terfikir untuk menggunakan animasi jQuery seperti animasi atau slaid, dan jujur ​​pada mulanya, jika anda menulis pemalam ini sendiri, anda akan menghadapi beberapa masalah, jadi ia tidak terlalu. Ianya mudah untuk dilaksanakan (lagipun, penguasaan saya terhadap js tidak begitu baik), dan kemudian saya mendengar rakan sekerja saya dan menemui jquery, dan hanya memetiknya terus selepas mengimportnya.

(Nasib baik, saya tidak mempunyai tabiat mencari pemalam dalam talian apabila saya ingin melakukan kesan khas tertentu. Apabila saya bercakap tentang perkara ini, saya juga memikirkan apa yang saya temui beberapa hari lalu tentang menatal tajuk jadual pada antara muka Penyelesaian telah ditetapkan, dan ia akan dimuat naik dalam beberapa hari Sejujurnya, saya mencari di Internet untuk kaedah itu tetapi tidak dapat mencari penyelesaian yang sesuai penyelesaian sendiri, yang cukup memuaskan, walaupun ia mungkin bukan penyelesaian terbaik)

Berbalik kepada topik, saya mencari di Internet Sejujurnya, pemalam orang lain sangat bagus, dan keserasian di bawah pelbagai pelayar juga telah diselesaikan, secara peribadi, saya hanya menggunakan dua atau tiga palam -in. Halaman digunakan, dan fail itu perlu diimport (ini nampaknya tidak menyusahkan), dan ia perlu digunakan oleh orang lain.

Kemudian, saya akhirnya menulisnya sendiri Walaupun mengambil sedikit masa dan menghadapi beberapa masalah, masalah itu akhirnya diselesaikan Sekurang-kurangnya saya menjadi lebih biasa dengan beberapa fungsi terbina dalam.

ps: Satu perkara terakhir untuk ditambah, selepas saya mencari penyelesaiannya sendiri, saya mencari Baidu sekali lagi, mengklik pautan web pertama yang keluar adalah kaedah yang saya gunakan.

Perulangan pepijat: Saya pada asalnya ingin membuat animasi, tetapi nampaknya terlalu menyusahkan, jadi mari kita tulis kod ini masalah, anda boleh Salin kod dahulu dan mencubanya.

PS: Berikut mengambil animasi animasi sebagai contoh

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:70%;margin:50px auto;height:300px;">
<div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">
<div class="test" style="margin-left:-6em">
<a>
测试用的文字
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script>
$("[data-toggle='tooltip']").tooltip();

$("#test").on("mouseover",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
})
.on("mouseout",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
})
//连续触发动画bug
//不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画
</script>
</body>
</html>

Dalam kod di atas, kaedah stop() telah diulas oleh saya Ia adalah penyelesaian yang paling sempurna pada pendapat saya penyelesaian, tetapi saya secara peribadi tidak fikir ia sangat sempurna, saya akan menyebut perbezaannya kemudian.

Pada mulanya, 

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

Dua baris kod ini tidak mempunyai fungsi penapis(), iaitu rupa kod semasa saya mula-mula menemui pepijat ini.

Punca pepijat ini disebabkan oleh pengumpulan animasi dalam tempoh yang singkat (animasi sebelumnya belum selesai dimainkan) (Saya rasa jika anda menghadapi masalah ini, anda akan tahu sebab ini jika anda melihat kembali kod). Oleh itu, terdapat dua penyelesaian.

【penapis】

Salah satunya ialah menggunakan penapis untuk menapis unsur-unsur yang sedang dianimasikan sebelum animasi berlaku, supaya hanya elemen yang animasi sebelumnya telah tamat boleh mencetuskan peristiwa baharu.

Kemudian ini membawa masalah baharu Apabila saya mengalihkan tetikus ke kandungan yang sepadan, peristiwa tetikus dicetuskan Pada masa ini, sebelum animasi tamat, saya mengeluarkan tetikus di luar kawasan kandungan yang sepadan dicetuskan, tetapi kerana animasi sebelumnya belum berakhir, walaupun acara dicetuskan, fungsi yang dijangkakan tidak dilaksanakan Pada masa ini, hasil jangkaan "peristiwa mouseleave dicetuskan dan kandungan disembunyikan" tidak dapat dicapai.

Sudah tentu, jika pengendali mengekalkan tetikus pada kandungan yang sepadan sebelum animasi yang dicetuskan oleh peristiwa alih tetikus tamat, penyelesaian ini tidak akan memberi sebarang kesan.

【berhenti】

Berkenaan stop(), walaupun saya tahu semua orang tahu perkara ini, mari kita gerakkannya semula. 

//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

Idea penyelesaian ini mudah: apabila saya beralih tetikus, animasi yang sepadan dicetuskan, tetapi sebelum animasi tamat, saya ingin meninggalkan tetikus, dan pada masa yang sama mencetuskan animasi yang sepadan dengan meninggalkan tetikus , saya perlu menghentikan Animasi berterusan elemen yang sepadan. Kemudian, pepijat tidak akan wujud lagi.

Akhirnya, okey, esei ini nampaknya tidak mempunyai ringkasan Sebenarnya, ia hanyalah kebiasaan dengan fungsi animasi animasi, slaid dan pudar, dan pada masa yang sama, biasakan diri anda dengan perbezaan antara berhenti dengan parameter dan tanpa. parameter (sejujurnya, tidak ada parameter pada mulanya) Saya terfikir untuk menggunakan stop Satu atau dua hari kemudian, apabila saya melihat API secara kebetulan, saya melihat berhenti, dan kemudian saya tiba-tiba datang dengan idea tentang. menggunakan stop untuk menyelesaikan pepijat ini).

Di atas ialah editor Script House yang berkongsi dengan anda pepijat tentang pencetus berterusan dan ketinggalan pelaksanaan berulang animasi, slaid, pudar dan animasi lain dalam jQuery saya harap ia akan membantu semua orang dalam kerja masa depan anda dan belajar.

Kenyataan：
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
Artikel sebelumnya：Penjelasan terperinci tentang penggunaan fungsi get_current_screen() dalam kemahiran development_javascript WordPressArtikel seterusnya：Penjelasan terperinci tentang penggunaan fungsi get_current_screen() dalam kemahiran development_javascript WordPress

Artikel berkaitan

Lihat lagi