Contoh analisis kaedah berkaitan kesan animasi jQuery_jquery

Contoh dalam artikel ini menerangkan kaedah yang berkaitan dengan kesan animasi jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. tunjukkan() kesan paparan

Syntax: show(speed,callback) Nombor/String, Kelajuan fungsi ialah masa pelaksanaan animasi, dalam milisaat. Ia juga boleh menjadi "perlahan", "biasa", "cepat".

tunjukkan(kelajuan,[peringan],panggilan balik) Nombor/String pelonggaran lalai kepada ayunan, linear pilihan;

Salin kod Kod adalah seperti berikut:

$("#div1").show(3000, function() { alert("Paparan animasi selesai!");

2. hide() kesan tersembunyi

Sintaks: sembunyikan(kelajuan, panggil balik) Nombor/String, Fungsi

sembunyikan (kelajuan, pelonggaran, panggil balik) Nombor/String

Salin kod Kod adalah seperti berikut:

$("#div1").hide(3000, function() { alert("Penyorok animasi selesai") });

3. toggle() menyembunyikan dan memaparkan secara automatik Apabila ia dipaparkan, ia disembunyikan pada masa ini, ia dipaparkan Sintaks: togol(kelajuan, panggil balik) Nombor/String, Fungsi

togol(kelajuan, panggil balik) Nombor/String, Rentetan, Fungsi

Salin kod Kod adalah seperti berikut:$("#div1").toggle(3000, function() { alert("Penukaran kesan animasi selesai") });

4 slideDown() memaparkan ke bawah, slow() mengembang secara mendatar dan menegak pada masa yang sama, manakala slideDown hanya mengembang ke bawah dalam arah menegak

Sintaks: slideDown(kelajuan, panggil balik) Nombor/String, Fungsi

slideDown(kelajuan,[meringankan],panggilan balik) Nombor/String,Fungsi

Salin kod Kod adalah seperti berikut:$("#div1").slideDown(3000, function() { alert("Kembangkan ke bawah untuk berjaya dipaparkan!");

5. slideUp() menyembunyikan ke atas hide() beroperasi dalam kedua-dua arah mendatar dan menegak, manakala slideUp() hanya bersembunyi ke atas dalam arah menegak

Sintaks: slaidUp(kelajuan, panggil balik) Nombor/String, Fungsi

slideUp(kelajuan,[meringankan],panggilan balik) Nombor/Rentetan, Rentetan, Fungsi

Salin kod Kod adalah seperti berikut:$("#div1").slideUp(3000, function() { alert("Sembunyikan dengan jayanya!" })

6. Suis SlideToggle dalam arah menegak Togol berada dalam arah mendatar dan menegak, manakala Togol slaid hanya dalam arah menegak.

Sintaks: slaidTogol(kelajuan, panggil balik) Nombor/String, Fungsi

slideTogol(kelajuan,[meringankan],panggilan balik) Nombor/Rentetan, Rentetan, Fungsi

Salin kod Kod adalah seperti berikut:$("#div1").slideToggle(3000, function() { alert("Pensuisan mendatar berjaya");

7. fadeIn() menukar ketelusan untuk memaparkan

Sintaks: fadeIn(kelajuan, panggil balik) Nombor/String, Fungsi

fadeIn(kelajuan,[meringankan],panggilan balik) Nombor/String,Fungsi

Salin kod Kod adalah seperti berikut:$("#div1").FadeIn(3000, function() { alert("Fade in berjaya!" });

8. fadeOut() menukar ketelusan untuk menyembunyikan

Sintaks: fadeOut(kelajuan, panggil balik) Nombor/String, Fungsi

fadeOut(kelajuan,[meringankan],callcack) Nombor/Rentetan, Rentetan, Fungsi

Salin kod Kod adalah seperti berikut:$("#div1").fadeOut(3000, function() { alert("Fade out and hide successfully!");
9. fadeToggle() menukar ketelusan untuk menukar paparan dan keadaan tersembunyi

Sintaks: fadeToggle(kelajuan, panggil balik) Nombor/String, Fungsi

pudarTogol(kelajuan,[meringankan],panggil balik) Nombor/String,Fungsi

Salin kod Kod adalah seperti berikut:

$("#div1").fadeToggle(3000, function() { alert("Fade in and fade out successfully!");

10. fadeTo() menukar ketelusan kepada ketelusan yang ditentukan pada masa yang ditetapkan

Sintaks: fadeTo(kelajuan, panggil balik) Nombor/String, Fungsi

fadeTo([speed],opacity,[esing],[fn]) Number/String,Float,String,Function

Salin kod Kod adalah seperti berikut:

$("#div1").fadeTo(3000, 0.22,fungsi (){ alert("Transparensi berjaya ditukar!" });

11 animasi tersuai animate() Secara umumnya, perubahan digital boleh digunakan untuk animasi.

Sintaks: bernyawa (param, kelajuan, pelonggaran, parameter gaya, masa, pilihan, fungsi

Salin kod Kod adalah seperti berikut:

$("#div1").animate({ width:300px, ketinggian,300px },3000);

Param hendaklah disertakan dalam kurungan segi empat sama dan anda boleh menggunakan parameter gaya css. Ambil perhatian bahawa Undang-undang Unta harus digunakan, sebagai contoh, saiz fon hendaklah ditulis sebagai Saiz fon. Kecerunan warna tidak disokong.

Kedudukan latar belakang
borderWidth
borderBottomWidth
borderLeftWidth
sempadanRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginKiri
marginRight
marginTop
outlineWidth
pelapik
paddingBottom
paddingLeft
paddingRight
paddingTop
ketinggian
lebar
maxHeight
maxWidth
minHeight
maxWidth
fon
Saiz fon
bawah
kiri
betul
atas
letterSpacing
wordSpacing
lineHeight
textIndent

12 stop() menghentikan animasi dijalankan

stop([clearQueue],[gotoEnd]); Kedua-dua parameter adalah nilai Boolean yang menunjukkan sama ada untuk menghentikan pelaksanaan animasi, dan yang kedua menunjukkan sama ada ia akan segera berubah kepada keadaan siap jika ia berhenti kepada Tidak untuk kekal dalam keadaan separuh dilaksanakan.

$("#div1").hide(5000) //此动画正在执行
$("#div1").stop();  //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。

13. kelewatan() Perlaksanaan animasi tertunda Apabila animasi berhenti(), anda juga boleh menggunakan kelewatan() untuk menangguhkan pelaksanaan. Pelaksanaan diteruskan di mana ia berhenti. Sudah tentu, tidak mungkin untuk meneruskan pelaksanaan menggunakan kaedah asal, tetapi tiada kesan kelewatan.

kelewatan(tempoh,[Nama giliran]) Tetapkan nilai kelewatan untuk melaksanakan animasi Integer, Rentetan

Salin kod Kod adalah seperti berikut:

$("#div1").delay(3000) .hide( 3000); //Menunjukkan bahawa hide(3000) akan dilaksanakan selepas 3000 milisaat;

14. jQuery.fx.off //Properti ini hanyalah sama ada untuk mematikan animasi pada halaman semasa Selepas mematikan animasi, tidak akan ada kesan animasi dan semua animasi dengan masa pelaksanaan yang ditetapkan akan selesai serta merta. Perhatikan tempat atribut ini muncul. Lokasi yang berbeza mempunyai kawasan impak yang berbeza
.

$(function(){
  jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
   });
})

15. jQuery.fx.interval //Properti ini menetapkan kadar bingkai animasi dalam milisaat. , kedudukan tempat atribut muncul turut mempengaruhi julat

$(function(){
  jQuery.fx.interval = 1000;
  $("#div1").click(function(){
   $("#div1").hide(3000); //jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。
   });
})

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.