Animasi JQuery dan contoh kesan khas analysis_jquery

Artikel ini menganalisis penggunaan animasi JQuery dan kesan khas dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Tunjukkan dan Sembunyikan

tunjukkan(spped,[panggilan balik]) dan sembunyikan(spped,[panggilan balik])
Kelajuan boleh diisi dengan perlahan, biasa dan pantas, dan kelajuan yang sepadan adalah masing-masing 600ms, 400ms, dan 200ms. Anda juga boleh terus mengisi milisaat Fungsi panggil balik ialah fungsi panggil balik Fungsi ini dipanggil selepas tindakan selesai

$("img").show(3000,function(){ 
   $(this).css("border","solid 1px #ccc”); 
});

fungsi togol(), format tanpa parameter, bertukar antara menunjukkan dan menyembunyikan
toggle(true orfalse) mempunyai bentuk nilai Boolean Apabila ia benar, elemen dipaparkan, jika tidak, elemen itu tersembunyi
Penggunaan togol(kelajuan,[panggilan balik]) adalah serupa dengan fungsi show()

Leret

slideDown(spped,[callback]) dan slideUp(spped,[callback])
Pada asasnya menukar ketinggian elemen
slideToglge(sped,[panggilan balik]) menukar kesan slaid

Pudar masuk dan keluar

fadeIn(spped,[callback]) dan fadeOut(spped,[callback])
Pada asasnya menukar ketelusan elemen
fadeTo(spped,opacity,[callback]); kelegapan ialah ketelusan, antara 0 dan 1, 1 adalah telus sepenuhnya

Animasi tersuai

menghidupkan(params,[tempoh],[meringankan],[panggilan balik])
params mewakili gaya atribut dan koleksi nilai yang digunakan untuk mencipta kesan animasi
tempoh mewakili tiga aksara kelajuan lalai, perlahan, biasa, pantas atau bilangan milisaat tersuai
Easing digunakan oleh pemalam animasi untuk mengawal prestasi animasi Ia biasanya mempunyai nilai aksara linear dan swing
panggil balik ialah fungsi panggil balik yang dilaksanakan selepas animasi selesai

$(this).animate( 
   {   width:"20%", 
       height:"70px"    
    }, //对象表示法，JQuery中常用这种格式传递参数 
   3000, 
   function(){ 
   $(this).css("border":"solid 3px #666") 
   .html("变大了！！"); 
   } 
);//传递参数时，必须用骆驼法来写属性名称，如font-size必须写成fontSize

$("p").animate( 
   { left:"20px", 
    top:"70px"  
   }, 
   3000 
) //向右移动20像素，向下移动70像素

berhenti([clearQueue],[gotoEnd])
clearQueue ialah nilai Boolean yang menunjukkan sama ada hendak menghentikan animasi yang sedang dilaksanakan
gotoEnd ialah nilai Boolean yang menunjukkan sama ada untuk melengkapkan animasi yang sedang dilaksanakan dengan segera
kelewatan(tempoh,[Nama gilir])
tempoh ialah nilai masa tertunda
queueName mewakili kata nama baris gilir, iaitu baris gilir animasi

$("a :eq(0)").click(function(){ 
   $("img").slideToggle(3000); 
}); //“拉窗帘”方式切换图片 
$("a:eq(1)").click(function(){ 
   $("img").stop(); 
}); //停止正在执行的动画 
$("a:eq(2)").click(function(){ 
   $("img").delay(2000) 
   .slideToggle(3000); 
}); //延时切换图片

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.