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() { //动画速度
var speed = 500; //绑定事件处理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切换弹出层的显示状态
$("#divPop").toggle(speed);
}); //单击空白区域隐藏弹出层
$(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> 
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
