Animasi dengan kelegapan dalam jQuery animate

3

Takeaways Key

Apabila menggunakan jQuery.Animate untuk memudar masuk atau keluar, Internet Explorer boleh menyebabkan masalah rendering fon. Untuk mengelakkan ini, gunakan sifat pintasan JQuery's Opacity ('Show') atau Opacity ('Hide'), atau tetapkan sifat CSS penapis kepada 'Tiada' apabila animasi selesai. JQuery Animate boleh digunakan untuk membuat animasi tersuai, mengubah kelegapan elemen, dan menghidupkan pelbagai sifat CSS sekaligus. Ia boleh digabungkan dengan kaedah lain seperti hover () atau klik () untuk membuat animasi interaktif.

Walaupun JQuery Animate tidak dapat secara langsung mengubah kelegapan imej latar belakang, penyelesaian melibatkan membuat div yang berasingan untuk imej latar belakang dan menghidupkan kelegapan div itu. Ini membolehkan kelegapan imej latar belakang ditukar tanpa menjejaskan kelegapan kandungan lain.

Apabila menggunakan kelegapan untuk memudar atau memudar dari masa ke masa menggunakan jQuery.Animate, anda akan menghadapi masalah rendering fon dengan semua versi Internet Explorer. Ini meninggalkan anda dengan 2 pilihan:
• Gunakan sifat pintasan JQuery's Opacity ('Show') atau Opacity ('Hide') yang mengendalikan kekurangan IE, atau menetapkan sifat CSS penapis untuk 'Tiada' sebaik sahaja anda telah menyelesaikan animasi anda dengan jelas, jika anda memudar sesuatu dari yang tersembunyi, pilihan 1 masuk Saya dapat melihat ini kerana saya mempunyai masalah rendering fon untuk CruiseAbout dalam kandungan tab yang disebabkan oleh penggunaan kelegapan saya di fcl.tabs. Akibatnya, saya telah menepuk fcl.tabs untuk menggunakan sifat -sifat "pertunjukan" dan "menyembunyikan" opacity dan bukannya "0? dan "1? Dan masalahnya telah ditetapkan.
kod pecah
• kod tetap

soalan yang sering ditanya mengenai kelegapan animasi dengan JQuery Animate

Bagaimanakah saya boleh menggunakan JQuery Animate untuk memudar elemen ke kelegapan tertentu? Kaedah .animate () membolehkan anda membuat animasi tersuai. Anda boleh menentukan harta CSS yang anda mahu menghidupkan dan tempoh animasi. Sebagai contoh, untuk memudar elemen hingga 50% kelegapan selama 2 saat, anda akan menggunakan kod berikut:

$tabContent<span>.css('opacity', 0);
</span>$tabContent<span>.animate(
</span><span>{
</span><span>opacity: 1
</span><span>}, 350);</span>

$ ("#elemen"). Animate ({

opacity: 0.5

$tabContent<span>.css('opacity', 'hide');
</span>$tabContent<span>.animate(
</span><span>{
</span><span>opacity: 'show'
</span><span>}, 350);</span>

, 2000); Menetapkan tempoh animasi hingga 2 saat.

Apakah perbezaan antara jQuery Fadeto () dan Animate ()? Perbezaan utama antara keduanya ialah Fadeto () direka khusus untuk mengubah kelegapan, sementara Animate () adalah fungsi yang lebih umum yang dapat menghidupkan mana -mana harta CSS. Sebagai contoh, untuk memudar elemen kepada kelegapan 50% lebih dari 2 saat, anda akan menggunakan kod berikut:

$ ("#elemen"). Fadeto (2000, 0.5); Ia mengambil objek sebagai hujah, di mana setiap pasangan bernilai harta mewakili harta CSS dan nilai terakhirnya. Sebagai contoh, untuk menghidupkan kedua -dua kelegapan dan lebar elemen, anda akan menggunakan kod berikut:

$ ("#unsur"). Lebar akhir hingga 50% dari saiz asalnya, dan "2000" menetapkan tempoh animasi hingga 2 saat. Kaedah hover () mengambil dua fungsi sebagai argumen: satu untuk dilaksanakan apabila tetikus memasuki elemen, dan satu untuk dilaksanakan apabila tetikus meninggalkan elemen. Kod:

$ ("#elemen"). hover (
function () { $ (ini) .animate ({opacity: 0.5}, 2000); Kod, "#Element" adalah ID elemen yang anda mahu menghidupkan, "Opacity: 0.5" menetapkan kelegapan akhir kepada 50% apabila tetikus memasuki elemen, "Opacity: 1" menetapkan kelegapan akhir kepada 100% apabila tetikus meninggalkan elemen, dan "2000" menetapkan tempoh setiap animasi kepada 2 saat.

Bolehkah saya menggunakan JQuery Animate untuk memudar elemen masuk dan keluar secara berterusan? Untuk melakukan ini, anda boleh membuat fungsi tersuai yang memudar elemen keluar dan kemudian memanggil dirinya apabila animasi selesai untuk memudar elemen kembali. Ini menghasilkan gelung yang berterusan sehingga halaman disegarkan atau fungsi dihentikan. 0}, 2000, fungsi () { (ini) .animate ({opacity: 1}, 2000, fadeinout);

}); memudar elemen kembali, "2000" menetapkan tempoh setiap animasi hingga 2 saat, dan "fadeinout" adalah nama fungsi yang dipanggil apabila setiap animasi selesai. Kaedah berhenti () menghentikan animasi yang sedang berjalan pada elemen yang dipilih. Jika anda ingin menghentikan semua animasi pada elemen, anda boleh lulus benar sebagai hujah pertama ke stop () kaedah:

$ ("#unsur"). Menggunakan JQuery Animate. Harta kelegapan dalam CSS terpakai kepada seluruh elemen, bukan hanya imej latar belakang. Ini bermakna jika anda menghidupkan kelegapan elemen, semua kandungannya (termasuk elemen teks dan kanak -kanak) juga akan menjadi telus. Anda boleh membuat div berasingan untuk imej latar belakang dan menghidupkan kelegapan div itu. Dengan cara ini, kelegapan imej latar belakang boleh diubah tanpa menjejaskan kelegapan kandungan yang lain. latar belakang-imej: url ('your-image.jpg');
}

#content {
kedudukan: relatif;
}
$ ("#latar belakang") Div dengan kandungan, "Opacity: 0.5" menetapkan kelegapan akhir kepada 50%, dan "2000" menetapkan tempoh animasi hingga 2 saat.

Bagaimanakah saya boleh menggunakan JQuery Animate untuk memudar elemen ke kelegapan tertentu dalam tempoh tertentu? Kaedah .animate () membolehkan anda membuat animasi tersuai. Anda boleh menentukan harta CSS yang anda ingin menghidupkan, nilai akhir harta itu, dan tempoh animasi. "#Element" adalah id elemen yang anda ingin menghidupkan, "Opacity: 0.5" menetapkan kelegapan akhir kepada 50%, dan "5000" menetapkan tempoh animasi hingga 5 saat. Untuk melakukan ini, anda perlu memilih semua elemen yang anda mahu menghidupkan dan menggunakan kaedah .animate (). Kaedah .animate () akan menggunakan animasi untuk setiap elemen yang dipilih. Kelas elemen yang anda mahu bernyawa, "Opacity: 0.5" menetapkan kelegapan akhir kepada 50%, dan "2000" menetapkan tempoh animasi hingga 2 saat. JQuery Animate, anda boleh menggunakan kaedah .animate () dua kali berturut -turut. Kaedah yang pertama () akan memudar elemen ke kelegapan tertentu, dan kaedah kedua .animate () akan memudarnya kembali ke kelegapan asalnya. 0.5

Bolehkah saya menggunakan JQuery Animate untuk memudar elemen ke kelegapan tertentu apabila butang diklik? Untuk melakukan ini, anda perlu memilih butang dan menggunakan kaedah .click (). Kaedah .click () mengambil fungsi sebagai hujah, yang dilaksanakan apabila butang diklik. 0.5

}, 2000); );

Atas ialah kandungan terperinci Animasi dengan kelegapan dalam jQuery animate. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!