Kongsi beberapa acara animasi jQuery yang biasa digunakan dan functions_jquery animasi

Beberapa fungsi animasi jQuery yang biasa digunakan telah disusun dan agak berguna apabila membuat halaman interaktif

.css('a','12px');
.css({
 a:'12px',
 b:'#fff'
});
.show();
.hide();
.toggle();
.fadeIn();
.fadeOut();
.fadeToggle();
.slideDown();
.slideUp();
.slideToggle();
.text('string');
.animate({
 a:'40px',
 b:'ccc'
},200)
.fadeTo(600,0.4);

Kemudian saya menyusun beberapa sifat CSS yang fungsi animasi boleh beroperasi, yang sebenarnya ditemui dari tempat lain di Internet (http://www.jb51.net/article/75510.htm) :

backgroundPosition
 borderWidth
 borderBottomWidth
 borderLeftWidth
 borderRightWidth
 borderTopWidth
 borderSpacing
 margin
 marginBottom
 marginLeft
 marginRight
 marginTop
 outlineWidth
 padding
 paddingBottom
 paddingLeft
 paddingRight
 paddingTop
 height
 width
 maxHeight
 maxWidth
 minHeight
 maxWidth
 font

fontSize (dinyatakan dalam parameter css fungsi animasi dan berbeza daripada sifat css standard, contohnya, standard css ini ialah: font-size. Dengan cara yang sama
Ini juga berlaku dengan banyak muka)

 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

fungsi animasi jQuery

Fungsi animasi jQuery dibahagikan kepada tiga kategori:

1. Fungsi animasi asas: kedua-dua kesan kecerunan telus dan gelongsor, kesan animasi yang biasa digunakan.
2. Fungsi animasi gelongsor: hanya gunakan kesan gelongsor.
3. Fungsi animasi pudar: hanya gunakan kesan pudar.

1. Fungsi animasi asas:

1. tunjukkan()

Tunjukkan elemen padanan tersembunyi. Ini ialah versi bukan animasi 'show(speed, [callback])'. Jika elemen yang dipilih kelihatan, kaedah ini tidak akan mengubah apa-apa. Kaedah ini akan berfungsi tanpa mengira sama ada elemen disembunyikan melalui kaedah hide() atau display:none;
Contohnya: paparkan semua perenggan, $("p").show()

2. rancangan(kelajuan,[panggilan balik])

Paparkan elemen padanan dengan animasi yang elegan dan secara pilihan mengembalikan fungsi panggil balik selepas paparan selesai. Setiap ketinggian, lebar dan kelegapan elemen yang dipadankan boleh ditukar secara dinamik berdasarkan kelajuan yang ditentukan.
Contohnya: gunakan animasi perlahan untuk memaparkan perenggan tersembunyi, berpanjangan 600 milisaat, $("p").show(600)

3. sorok()

Sembunyikan elemen paparan. Ini ialah versi bukan animasi 'hide( speed, [callback] )'. Jika elemen yang dipilih disembunyikan, kaedah ini tidak akan mengubah apa-apa.
Contohnya: sembunyikan semua perenggan, $("p").hide()

4 sembunyi(laju,[panggilan balik])

Sembunyikan semua elemen padanan dengan animasi yang elegan dan secara pilihan mencetuskan fungsi panggil balik selepas paparan selesai. Anda boleh menukar ketinggian, lebar dan kelegapan setiap elemen yang dipadankan secara dinamik berdasarkan kelajuan yang ditentukan. Dalam jQuery1.3, padding dan margin juga akan dianimasikan, dan kesannya akan lebih lancar.
Contohnya: Gunakan 600ms untuk menyembunyikan perenggan secara perlahan, $("p").hide("slow");

5. togol

Togol keadaan unsur yang boleh dilihat. Jika elemen kelihatan, tukar kepada tersembunyi jika elemen itu tersembunyi, tukarkannya kepada kelihatan.
Contohnya: togol keadaan kelihatan semua perenggan, $("p").togol()

6. togol(suis)

Keadaan kelihatan unsur bunga potong adalah berdasarkan parameter suis (benar kelihatan, palsu tersembunyi). Jika suis ditetapkan kepada benar, kaedah show() dipanggil untuk memaparkan elemen padanan Jika suis ditetapkan kepada false, hide() dipanggil untuk menyembunyikan elemen.
Contohnya: tukar keadaan yang boleh dilihat bagi semua perenggan, varflip=0;$("butang").click(function(){$("p").toggle(flip %2==0);});

7 togol(kelajuan,[panggilan balik])

Togol semua elemen padanan dengan animasi yang elegan dan secara pilihan mencetuskan fungsi panggil balik selepas paparan selesai. Secara dinamik menukar ketinggian, lebar dan kelegapan setiap elemen padanan mengikut kelajuan yang ditentukan. jquery1.3, padding dan margin juga akan mempunyai animasi, dan kesannya akan menjadi lebih lancar.

Contohnya: Gunakan 200ms untuk menukar keadaan paparan perenggan dengan cepat, kemudian muncul kotak dialog, $("p").toggle("fast",function(){alert("hello!") ;});

2. Fungsi animasi gelongsor gelongsor

1. slaidTurun(kelajuan,[panggilan balik])

Paparkan semua elemen padanan secara dinamik melalui perubahan ketinggian (naikkan ke bawah), dan hantar fungsi panggil balik di lokasi pilihan selepas paparan selesai. Kesan animasi ini hanya melaraskan ketinggian elemen dan boleh menyebabkan elemen padanan dipaparkan dalam cara "gelongsor". Dalam jQuery 1.3, padding atas dan bawah serta margin juga akan dianimasikan, dan kesannya akan lebih lancar.
Contohnya: Gunakan 600ms untuk meluncur perlahan perenggan ke bawah, $("p").slideDown("perlahan");

2. slaidNaik(kelajuan,[panggilan balik])

Sembunyikan semua elemen padanan secara dinamik dengan menukar ketinggian (menurun ke atas) dan secara pilihan mencetuskan fungsi panggil balik selepas penyembunyian selesai.
Contohnya: slaid perlahan perenggan ke atas dalam 600ms, $("p").slideUp("slow");

3. slaidTogol(kelajuan,[panggilan balik])

Togol keterlihatan semua elemen padanan melalui perubahan ketinggian dan secara pilihan mencetuskan fungsi panggil balik selepas suis selesai.
Contohnya: slaid perlahan perenggan ke atas atau ke bawah dalam 600ms, $("p").slideToggle("perlahan");

3. Fungsi pudar Pudar

1. fadeIn(kelajuan,[panggilan balik])

Mencapai kesan pudar masuk semua elemen padanan melalui perubahan dalam ketelusan dan secara pilihan memanggil fungsi panggil balik selepas animasi selesai. Animasi ini hanya melaraskan kelegapan elemen, yang bermaksud bahawa ketinggian dan lebar semua elemen padanan tidak akan berubah.
Contohnya: Gunakan 600ms untuk perlahan-lahan memudar perenggan, $("p").fadeIn("slow");

2. fadeOut(kelajuan,[panggilan balik])

Mencapai kesan pudar semua elemen padanan melalui perubahan dalam kelegapan, dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai.
Contohnya: Gunakan 600ms untuk perlahan-lahan memudar perenggan, $("p").fadeOut("slow");

3 fadeTo(kelajuan, kelegapan,[panggilan balik])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用600ms缓慢将段落的透明度调整到0.66，大约2/3的可见度，$("p").fadeTo("slow",0.66)

四、自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、toggle这样的字符串值，则会就该属性调用默认的动画形式。

例如：点击按钮后div元素的几个不同属性一同变化，

$("#go").click(function(){
$("#block").animate({
width:"90%",height:"100%",fontSize:"10em",borderWidth:10
},1000);
});

2、stop([clearQueue],[gotoEnd])

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。gotoEnd(Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

例如：点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
[javascript] view plaincopy
$(document).ready(function(){ 
$(".box h3").toggle(function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).addClass("arrow"); 
return false; 
},function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).removeClass("arrow"); 
return false; 
}); 
});