Mari kita bincangkan tentang cara melaksanakan animasi menggunakan jQuery (penjelasan kod terperinci)

Bagaimana untuk melaksanakan animasi menggunakan jQuery? Artikel berikut akan memperkenalkan anda kepada beberapa kaedah jQuery untuk melaksanakan animasi yang telah ditetapkan atau animasi tersuai Saya harap ia akan membantu anda.

Animasi pratakrif

Tunjukkan dan Sembunyikan

show() Kaedah dan Kaedah hide() ialah kaedah animasi paling asas dalam jQuery. Sintaks khusus adalah seperti berikut:

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);

• kelajuan: rentetan satu daripada tiga kelajuan yang telah ditetapkan ("perlahan", "biasa" atau "cepat") atau nilai milisaat yang mewakili tempoh animasi .
• pelonggaran: digunakan untuk menentukan kesan pensuisan, lalai ialah "ayunan", parameter yang tersedia ialah "linear".
• fn: Fungsi dilaksanakan apabila animasi selesai, sekali untuk setiap elemen. Kaedah

/* 
显示与隐藏
1.无动画版本
  * show()- 显示
  * hide() - 隐藏
2.有动画版本 - 同时改变宽度和高度
 * show (speed,callback)
  * speed - 动画执行的时长,单位为毫秒
  * callback - 动画执行完毕后的回调函数
 * hide (speed, callback)
  * speed - 动画执行的时长,单位为毫秒
  * callback - 动画执行完毕后的回调函数
*/

$('#box').hide(2000,function(){
$('#box').show(2000);          
});

Animasi gelongsor

slidelUp() kaedah dan kaedah slideDown() mencapai kesan animasi dengan menukar nilai ketinggian . Sintaks khusus adalah seperti berikut:

$element.slideUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

• kelajuan: rentetan satu daripada tiga kelajuan yang telah ditetapkan ("perlahan", "biasa" atau "cepat") atau nilai milisaat yang mewakili tempoh animasi .
• pelonggaran: digunakan untuk menentukan kesan pensuisan, lalai ialah "ayunan", parameter yang tersedia ialah "linear".
• fn: Fungsi dilaksanakan apabila animasi selesai, sekali untuk setiap elemen. Kaedah

/* 
滑动式动画 - slideup()和slideDown()
* 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
* 效果 - 改变指定元素的高度
*/
$('#box').slideUp(3000);
$('#box').slideDown(3000);

Kesan pudar

fadeln() kaedah dan kaedah fadeOut() mencapai kesan animasi dengan menukar ketelusan. Sintaks khusus adalah seperti berikut:

$element.fadeln([speed],[easing],[fn]);
$element.fadeOut([speed],[easing],[fn]);

• kelajuan: rentetan satu daripada tiga kelajuan yang telah ditetapkan ("perlahan", "biasa" atau "cepat") atau nilai milisaat yang mewakili tempoh animasi .
• pelonggaran: digunakan untuk menentukan kesan pensuisan, lalai ialah "ayunan", parameter yang tersedia ialah "linear".
• fn: Fungsi dilaksanakan apabila animasi selesai, sekali untuk setiap elemen.

// 改变元素的透明度
$('#box').fadeOut(3000);
$('#box').fadeIn(3000);

Kesan penukaran animasi

Selain menyediakan tiga kesan animasi yang telah ditetapkan, jQuery juga menyediakan tiga kumpulan Kesan penukaran animasi :

• toggle ([kelajuan], [meringankan] [, fn] ) kaedah: Jika elemen kelihatan, tukar kepada tersembunyi jika elemen tersembunyi, tukar kepada Kelihatan. Kaedah
• slideToggle([kelajuan], [esing] [, fn]): Togol keterlihatan semua elemen padanan dengan menukar ketinggian dan secara pilihan mencetuskan fungsi panggil balik selepas suis selesai.
• fadeToggle([kelajuan], [meringankan] [, fn]) Kaedah: Togol kesan pudar masuk dan pudar semua elemen padanan ke hidup dan mati melalui perubahan kelegapan dan secara pilihan mencetuskan panggilan balik fungsi.

$('#btn').click(function(){
// $('#box').toggle(3000);
// $('#box').slideToggle(3000);
$('#box').fadeToggle(3000)
})

Mempunyai had

Animasi tersuai

kaedah animate()

jQuery menyediakan kaedah anirmate() untuk melengkapkan kesan animasi tersuai Kaedah ini mempunyai dua kegunaan:

$element.animate(properties,duration,easing,complete)

• sifat: objek sifat dan nilai CSS, Animasi akan. bergerak berdasarkan set objek ini.
• tempoh : Rentetan atau nombor yang menentukan berapa lama animasi akan dijalankan.
• pelonggaran : Rentetan yang menunjukkan fungsi pelonggaran untuk digunakan untuk peralihan.
• corplete: fungsi panggil balik dilaksanakan apabila animasi selesai.

/* 
animate()方法–自定义动画方法
1.animate(properties,duration，callback)
 * properties - 表示cSS的样式属性
  * 设置动画执行结束的样式属性值
 * duration - 表示动画执行的时长，单位为亳秒
 * callback - 表示动画执行完毕后的回调函数
2.animate(properties,options)
 * properties - 表示cSS的样式属性
  * 设置动画执行结束的样式属性值
 * options - 表示设置动画的相关参数
  * speed - 表示动画执行的时长,单位为毫秒
  * comalete - 表示动画执行完毕后的回调函数
  * queue - 布尔值,设置是否添加到动画队列中
*/
/* $('#box').animate({
 width : 100,
 height : 100
},3000);
*/
$('#box').animate({
 width : 100,
 height : 100,
 left : 100
},{
 speed : 3000
});

mencapai kesan animasi melalui kaedah animate(), tetapi atribut gaya CSS berikut tidak disokong:

• backgroundColor
• borderBottonColor.
• borderLeftColor
• borderRightColor
• borderTopColor
• Color
• outlineColor

Kesan serentak dan beratur

Kesan serentak: merujuk kepada pelaksanaan berbilang kesan animasi pada masa yang sama .

$("#panel").click(function(){
 $(this).animate({
   left: "500px",
   height:"200px"
 }, 3000);
};

Kesan baris gilir: merujuk kepada pelaksanaan berbilang animasi dalam urutan.

$("#panel").click(function(){
 $(this).animate({ left: "500px"},3000)
  .animate({ height: "200px" }, 3000);
});

queue: Digunakan untuk mengawal sama ada kesan animasi semasa adalah serentak atau beratur:

/* 
queue - 用于控制当前的动画效果是并发还是排队效果
* 参数
 * false - 并发
 * true - 排队
*/
$('#box').animate({
 left : 300
},{
 duration : 3000
}).animate({
 top : 300
},{
 duration : 3000,
 queue : true
});

Hentikan kesan animasi

jQuery menyediakan kaedah stop() untuk menghentikan semua animasi berjalan pada elemen yang ditentukan Sintaks khusus adalah seperti berikut:

$element.animate([clearQueue][, gotoEnd]);

clearQueue: Jika ditetapkan kepada benar, baris gilir dikosongkan. . Animasi boleh ditamatkan serta-merta.

gotoEnd: Biarkan animasi yang sedang dilaksanakan selesai serta-merta, tetapkan semula gaya asal pertunjukan dan sembunyikan, fungsi panggil balik, dsb.

$('#stort').click(function(){
 $('#box').animate({
 left : 600
},3000).animate({
 top : 200
 },3000)
});
$('#stop').click(function(){
/* 
 * stop()方法没有接收任何参数时 - 立即停止执行动画
 * stop(queue)方法的第一个参数
  * false - 表示停止当前动画,但队列中的动画继续执行
  * true - 表示停止当前动画,并且清空动画队列
 * stop (queue,gotoEnd)方法的第二个参数
  * false - 不会做任何处理
  * true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式
*/
 $('#box').stop(true,true);
});

Tangguhkan pelaksanaan animasi

jQuery menyediakan kaedah delay() untuk menetapkan kelewatan untuk menangguhkan pelaksanaan item berikutnya dalam baris gilir Sintaks khusus adalah seperti berikut:

$element.delay(duration, queueName]);

tempoh: Masa tunda dalam milisaat.

Nama giliran: kata nama baris gilir, lalainya ialah Ex, baris gilir animasi.

$('#box').animate({
 left : 600
},3000).delay(1000).animate({
 top : 200
},3000);

Tutorial video berkaitan yang disyorkan: tutorial video jQuery

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara melaksanakan animasi menggunakan jQuery (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!