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

WBOY
Lepaskan: 2016-05-16 16:16:22
asal
883 orang telah melayarinya

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:

Salin kod Kod adalah seperti berikut:
 
 
     
         
         
         
            $(document).ready(function() { 
                $("#hide").klik(function() { 
                    $("#text").hide(); 
                }); 
                $("#show").klik(function() { 
                    $("#text").show(); 
                }); 
                $("#toggle").klik(function() { 
                    $("#text").togol(); 
                }); 
            }); 
       
 
         
 
 
        JQ淡出与显示 
         
     
     
        
   

 
        被折腾的文本 
   

 
     
   

(1)部分
部分主要是实现核心代码部分,放在后面来讲,先说部分

复制代码 代码如下:

Teks yang dilambung

 




(2) bahagian




Salin kod

Kod adalah seperti berikut: