fungsi animasi asas jQuery
1 Gunakan fungsi animasi asas
Fungsi animasi asas terbahagi kepada tiga kategori: tunjukkan, sembunyikan dan togol, yang kesemuanya menyediakan parameter- versi percuma. Menunjukkan bahawa penukaran animasi tidak boleh digunakan pada keadaan paparan elemen:
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();memberikan dua lebihan parameter Kerana fungsi panggil balik boleh diabaikan, anda boleh menghantar nilai sebagai satu-satunya parameter seperti yang digunakan dalam contoh pembukaan, maka Elemen akan dipaparkan/disembunyikan dengan kesan animasi dalam masa yang ditentukan oleh parameter:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");Jika 200 diluluskan, ia bermakna lapisan akan dipaparkan melalui kecerunan dalam masa 200 milisaat . Parameter kelajuan boleh menggunakan tiga kelajuan yang telah ditetapkan Satu daripada rentetan ("perlahan", "biasa", atau "cepat") atau nilai milisaat yang mewakili tempoh animasi (seperti:
Ketiga-tiganya). fungsi boleh dihantar dalam panggilan balik fungsi panggil balik, tandatangan Seperti berikut:
function callback() { this; // dom element}Ini dalam fungsi panggil balik ialah objek DOM yang melaksanakan fungsi ini Ia akan dilaksanakan apabila animasi tamat.
2. Gunakan fungsi togol
Fungsi togol ialah fungsi yang lebih berkuasa yang boleh menukar keadaan elemen yang boleh dilihat menghadapi keperluan Situasi menggunakan togol Sebagai contoh, anda mahu sekeping teks memaparkan lapisan pop timbul apabila anda mengkliknya buat kali pertama, dan untuk menyembunyikan lapisan pop timbul apabila anda mengkliknya untuk kali kedua. .
Nota: Kaedah toggle() diisytiharkan usang dalam jQuery1.8. Animasi jQuery juga mempunyai kaedah yang dipanggil togol. Mana yang dipanggil bergantung pada tetapan parameter yang diluluskan.
Kita boleh mencapai kesan ini dengan mengubah sedikit contoh pembukaan:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() { //動(dòng)畫速度
var speed = 500; //綁定事件處理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //設(shè)置彈出層位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切換彈出層的顯示狀態(tài)
$("#divPop").toggle(speed);
}); //單擊空白區(qū)域隱藏彈出層
$(document).click(function(event) {
$("#divPop").hide(speed)
}); //單擊彈出層則自身隱藏
$("#divPop").click(function(event) {
$("#divPop").hide(speed)
});
}); </script></head><body>
<div>
<button id="btnShow">Display the text prompt</button>
</div>
<!-- 彈出層 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html> 
