Rumah >hujung hadapan web >tutorial js >Contoh kesan fade-in dan fade-out paling asas berdasarkan jQuery_jquery
Contoh kesan fade-in dan fade-out paling asas berdasarkan jQuery_jquery
- WBOYasal
- 2016-05-16 16:16:22876semak imbas
Contoh dalam artikel ini menerangkan cara mencapai kesan fade-in dan fade-out yang paling asas berdasarkan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
jQuery ialah perpustakaan JavaScript, yang merupakan lanjutan daripada JavaScript, digunakan untuk memenuhi keperluan yang semakin meningkat untuk kesan khas yang berbeza. Intipatinya ialah JavaScript
Mari kita tulis program JQ asas untuk menggambarkan JQ.
1. Matlamat asas
Terdapat tiga butang berikut pada halaman web Satu hanya boleh menyembunyikan teks, satu hanya boleh memaparkan teks, dan satu boleh menyembunyikan dan memaparkan teks pada masa yang sama Klik sekali untuk memaparkan, klik sekali lagi untuk menyembunyikan, dan kitaran tidak berkesudahan. Seperti yang ditunjukkan di bawah:
2. Proses pengeluaran
1. Pertama, anda perlu memuat turun fail sokongan JQ dari tapak web rasmi JQ dan memasukkannya ke dalam folder tapak anda. Fail sokongan ini ialah jQuery1.11 (klik untuk membuka pautan). Anda boleh pergi ke laman web rasmi jQuery untuk memuat turun jQuery1.11 yang serasi dengan pelayar lama IE6 (klik untuk membuka pautan), bukannya jQuery2 yang tidak. serasi dengan pelayar lama IE6.
2. Keseluruhan kod halaman web adalah seperti berikut, dibahagikan kepada serpihan untuk penjelasan:
$(document).ready(function() {
$("#hide").klik(function() {
$("#text").hide();
});
$("#show").klik(function() {
$("#text").show();
});
$("#toggle").klik(function() {
$("#text").togol();
});
});
被折腾的文本