Penjelasan terperinci tentang animasi jQuery dan special effects_jquery

1. Tunjukkan dan sembunyikan hide() dan tunjukkan()

Untuk animasi, menunjukkan dan menyembunyikan adalah salah satu kesan paling asas Bahagian ini memperkenalkan secara ringkas paparan dan penyembunyian jQuery.

Salin kod Kod adalah seperti berikut: $(function() { $("input:first").klik(function() { $("p").hide(); //Sembunyikan }); $("input:last").klik(function() { $("p").show(); //Show }); }); Klik butang untuk melihat kesan

& Lt; div & gt & lt; em & gt; Animasi tersuai, dsb. 1. Paparkan dan sembunyikan hide() dan tunjukkan() Untuk animasi, paparan dan sembunyikan adalah salah satu kesan paling asas Bahagian ini memperkenalkan paparan dan penyembunyian jQuery secara ringkas.

Di atas ialah ujian bagi fungsi hide() dan show().

2 Gunakan kaedah show(), hide() dan togol() Contoh sebelumnya secara ringkas memperkenalkan kaedah show() dan hide() Malah, kedua-dua kaedah ini boleh menerima parameter untuk mengawal proses paparan dan sembunyikan.

Sintaksnya adalah seperti berikut tayangan(tempoh,[panggilan balik]);

hide(tempoh,[panggilan balik]); Antaranya, tempoh mewakili tempoh masa pelaksanaan animasi, yang boleh menjadi rentetan yang mewakili kelajuan, termasuk perlahan, normal dan pantas. Ia juga boleh menjadi integer mewakili masa (milisaat). panggil balik ialah fungsi panggil balik pilihan. Dilaksanakan selepas animasi selesai.

Salin kod Kod adalah seperti berikut: $(function() { $("input:first").klik(function() { $("p").hide(300); //Sembunyi }); $("input:last").klik(function() { $("p").tunjukkan(500); //Tunjukkan }); });

Contohnya sama seperti contoh pertama, kecuali parameter masa ditambahkan untuk hide() dan show(). Malah, toogle() juga boleh menambah parameter acara. 2 Gunakan kaedah fadeIn() dan fadeOut()

Untuk kesan animasi, jQuery juga menyediakan dua kaedah praktikal: fadeIn() dan fadeOut Kesan animasi mereka adalah serupa dengan fading, dan sintaksnya adalah sama seperti slow() dan hide().

fadeIn(tempoh, [panggilan balik]); fadeOut(tempoh, [panggilan balik]);

Contoh

Salin kod Kod adalah seperti berikut: $(function() { $("input:eq(0)").klik(function() { }); $("input:eq(1)").klik(function() { $("img").fadeIn(1000); // FadeIn secara beransur-ansur }); });

http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg ">

Penggunaan kaedah fadeTo(). Kaedah

fadeTo() secara beransur-ansur menukar kelegapan elemen yang dipilih kepada nilai yang ditentukan.

Contoh:

Salin kod Kod adalah seperti berikut: $(function() { $("input:eq(0)").klik(function() { $("img").fadeOut(1000); }); $("input:eq(1)").klik(function() { $("img").fadeIn(1000); }); $("input:eq(2)").klik(function() { $("img").fadeTo(1000, 0.5); }); $("input:eq(3)").klik(function() { $("img").fadeTo(1000, 0); }); });

parameter berkaitan fadeOut kelajuan Pilihan. Menentukan kelajuan perubahan elemen daripada ketelusan semasa kepada ketelusan yang ditentukan.

Nilai yang mungkin:

Millisaat (cth. 1500) "lambat"

"biasa" "cepat" kelegapan diperlukan. Menentukan ketelusan untuk pudar masuk atau keluar. Mestilah nombor antara 0.00 dan 1.00. panggil balik Pilihan. Fungsi yang akan dilaksanakan selepas fungsi fadeTo dilaksanakan.

Untuk mengetahui lebih lanjut tentang panggilan balik, lawati bab Panggilan Balik jQuery kami.

Parameter ini tidak boleh ditetapkan melainkan parameter kelajuan ditetapkan.

3. Kesan slaid ke atas dan ke bawah

Salin kod Kod adalah seperti berikut: $(fungsi() { $("input:eq(0)").klik(function() { $("div").add("img").slideUp(1000); }); $("input:eq(1)").klik(function() { $("div").add("img").slideDown(1000); }); $("input:eq(2)").klik(function() { $("div").add("img").hide(1000); }); $("input:eq(3)").klik(function() { $("div").add("img").show(1000); }); });

前面提到了几种动画效果，jQuery还提供了slideUp()和slideDown()来模拟PPT中的类似幻灯片和hide()完全相同。

以上代码定义了一个div和一个img,用add方法组合在一起。

4.自定义动画

考虑到框架的通用性及代码文件的大小，jQuery不能涵盖所有的动画效果，但作宛揜，但徛中，但徛不能涵盖所有的动画效果，但但宛揜，但佛宛揯住使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。

menghidupkan(params,[tempoh],[meringankan],[panggilan balik]) 其中params为希望进行变幻的css属性列表，以及希望变化到的最终值，duration为可选页，为可选页，为可选页，为可选页，与为可选页，为可选页，为可选页，与为可选页，为可选页，为可选页，其中中可了一一一一可一一倉，其中params全相同。easing为可选参数，通常供动画插件使用。用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.panggilan balik为可选的回调函数。用来控制节奏的变化过程。 🎜> 需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外，params只纔纔方作属性。例如width.top.opacity等

像latar belakangColor这样的属性不被animate支持。

复制代码 代码如下: div { warna latar belakang: #FFFF00; ketinggian: 40px; lebar: 80px; sempadan: 1px pepejal #000000; jidar atas: 5px; pelapik: 5px; penjajaran teks: tengah; } $(fungsi() { $("butang").klik(fungsi() { $("#block").animate({ kelegapan: "0.5", lebar: "80%", ketinggian: "100px", borderWidth: "5px", Saiz fon: "30px", marginTop: "40px", marginKiri: "20px" }, 2000); }); }); Go>> 动画！ 在params中，jQuery还可以用“ =”或者"-="来表示相对变化。如

复制代码 代码如下: div { warna latar belakang: #FFFF00; ketinggian: 40px; lebar: 80px; sempadan: 1px pepejal #000000; jidar atas: 5px; pelapik: 5px; penjajaran teks: tengah; jawatan: mutlak; } $(fungsi() { $("button:first").klik(function() { $("#block").animate({ kiri: "-=80px" //相对左移 }, 300); }); $("button:last").klik(function() { $("#block").animate({ kiri: " =80px" //相对右移 }, 300); }); }); Go>> Go>> 动画！ 先将div进行绝对定位，然后使用animate()中的-=和 =分别实现相对左移和相对对

animate()方法还有另外一种形式，如下所示：

menghidupkan(param, pilihan) 其中，params与第一种形式完全相同，pilihan为动画可选参数列表，主要包括duration,esaing，panggilan balik，durasi三中中中中可中一中中中文种形式完全一样，queue为布尔值，表示当有多个 animate()组成jQuery时，当前animate()紧接这下一个animate(),是按顺序执行(true)还是妶埑还是妏 如下例子，展示了animate()第二种用法。

复制代码 代码如下: div { warna latar belakang: #FFFF22; lebar: 100px; text-align: center; Sempadan: 2px pepejal #000000; jidar: 3px; saiz fon: 13px; keluarga fon: Arial, Helvetica, sans-serif; } masukkan { sempadan: 1px pepejal #000033; } $(function() { $("input:eq(0)").klik(function() { //Animate pertama dan animasi kedua dilaksanakan pada masa yang sama, dan kemudian yang ketiga dilaksanakan $("#block1").animate({ keluar }, { baris gilir: palsu, Tempoh: 1500 .bernyawa({ saiz 4 px": " }, 1000) .bernyawa({ borderRightWidth: "20px" }, 1000); }); $("input:eq(1)").klik(function() { //Laksanakan tiga animasi dalam urutan $("#block2").animate({ }, 1500) .bernyawa({ Schriftgröße: „24px“ }, 1000) .animate({ borderRightWidth: „20px“ }, 1000); }); $("input:eq(2)").click(function() { $("input:eq(0)").click(); $("input:eq(1)").click(); }); $("input:eq(3)").click(function() { //恢复默认设置 $("div").css({ Breite: "", Schriftgröße: "", borderWidth: "" }); }); }); Block1 Block2 以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行.可以通过重置反复测试Sie können die Funktion animate() verwenden.

以上就是本文的全部内容了，希望大家能够喜欢.

Penjelasan terperinci tentang animasi jQuery dan special effects_jquery

Artikel berkaitan