Contoh penggunaan kaedah animate() dalam jQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan kaedah animate() dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kaedah ini digunakan untuk mencipta animasi tersuai dan boleh menentukan tempoh pelaksanaan animasi dan kesan pemadaman. Fungsi panggil balik juga boleh dicetuskan selepas animasi selesai.

Penggunaan kaedah animate():

Kaedah 1:

Tentukan sifat gaya penamatan animasi dalam bentuk objek "nama/nilai hartanah". Contohnya:

Salin kod Kod adalah seperti berikut:

$("div").animate({width:"1000px" })

Kod di atas boleh melaraskan div daripada lebar asalnya kepada 1000px. Anda juga boleh menggunakan berbilang set objek "nama/nilai" sekaligus. Contohnya:

Salin kod Kod adalah seperti berikut:

$("div").animate( {width: "1000px" ,Saiz fon: 20})

Kod di atas boleh melaraskan div daripada lebar asal kepada 1000px dan saiz fon asal kepada 20px. Anda perlu memberi perhatian khusus kepada tiga perkara berikut:

1 Jika saiz tiada unit, unit lalai ialah px.
2. Nilai atribut perlu dibalut dengan petikan berganda Jika nilai atribut ialah nombor, ia boleh ditinggalkan.
3. Atribut seperti font-szie atau background-color perlu mengalih keluar garisan mendatar tengah dan huruf pertama perkataan kedua mesti menggunakan huruf besar.

Kaedah

animate() boleh menentukan dengan jelas tempoh kesan animasi Jika tidak dinyatakan, nilai lalai normal akan digunakan. Contohnya:

Salin kod Kod adalah seperti berikut:

$("div").animate( {width: "1000px" ,fontSaiz: 20},2000)

Kod di atas menetapkan bahawa kesan animasi akan selesai selepas 2000 milisaat (2 saat).
Fungsi panggil balik boleh dipanggil selepas pelaksanaan animasi selesai. Contohnya:

Salin kod Kod adalah seperti berikut:

$("div").animate( {width: "1000px" },5000 ,function(){alert("Pelarasan selesai")})

Kod di atas boleh mencetuskan fungsi panggil balik selepas animasi selesai, jadi kotak gesaan akan muncul.
Contoh kod:

Salin kod Kod adalah seperti berikut:

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional