jQuery memudar elemen masuk dan keluar untuk menjadikan kesan lebih vivid_jquery

Untuk mencapai kesan yang lebih jelas, anda boleh memudarkan elemen keluar atau masuk, dalam mana-mana keadaan hanya menukar ketelusan elemen itu dari semasa ke semasa. jQuery menyediakan 3 fungsi yang berkaitan dengan fade in dan fade out:

·fadeIn() menjadikan elemen tersembunyi menjadi pudar untuk dilihat. Pertama, ruang yang diduduki oleh elemen muncul pada halaman (yang mungkin bermakna elemen lain pada halaman dialihkan kemudian, elemen itu beransur-ansur kelihatan. Jika elemen sudah kelihatan pada halaman, fungsi ini tidak mempunyai kesan. Jika nilai kelajuan tidak diberikan, elemen akan pudar dalam menggunakan tetapan "biasa" (400 milisaat).

·fadeOut() menyembunyikan elemen yang boleh dilihat dengan menyebabkan ia pudar secara hantu daripada pandangan. Jika elemen sudah disembunyikan pada halaman, fungsi ini tidak mempunyai kesan, sama seperti fungsi fadeIn(). Jika nilai kelajuan tidak diberikan, elemen akan pudar pada 400 milisaat.

·fadeToggle() menggabungkan kesan fade-in dan fade-out. Jika elemen sedang disembunyikan, ia pudar ke dalam paparan jika ia kelihatan pada masa ini, elemen itu hilang dari pandangan. Anda boleh menggunakan fungsi ini untuk membuat petua alat muncul pada halaman atau hilang dari halaman. Sebagai contoh, katakan anda mempunyai butang yang memaparkan perkataan "arahan." Apabila pelawat mengklik butang, div dengan huraian akan pudar dalam paparan; Untuk membuat kotak gesaan memudar masuk atau keluar setiap setengah saat, anda boleh menulis kod seperti ini:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·Cara fadeTo() berfungsi sedikit berbeza daripada dua fungsi kesan yang lain. Ia memudarkan imej kepada ketelusan tertentu. Sebagai contoh, anda boleh membuat imej pudar kepada separa lutsinar. Tidak seperti kesan lain, nilai kelajuan mesti disediakan. Selain itu, nilai antara 0 dan 1 disediakan untuk mewakili ketelusan elemen. Contohnya, untuk memudarkan semua perenggan kepada 75% ketelusan, anda boleh menulis kod seperti ini:

$('p').fadeTo('normal'，.75);

Fungsi ini menukar ketelusan elemen, tidak kira sama ada elemen itu kelihatan atau tidak. Sebagai contoh, katakan anda ingin memudarkan elemen yang kini disembunyikan kepada ketelusan 50%. Kemudian, jika elemen dipaparkan menggunakan show() atau fadeIn(), ia akan dipaparkan dengan ketelusan 50%. Begitu juga, jika anda menyembunyikan unsur lut sinar dan kemudian menunjukkannya, tetapan ketelusannya dipulihkan.