satu. Tunjukkan, sembunyikan
Metode tampilan di jQuery adalah: .show () dan metode tersembunyi adalah: .hide (). Ketika tidak ada parameter, sulit untuk menampilkan dan menyembunyikan konten.
$ ('. Show'). Klik (function () {// atur peristiwa pemicu $ ('#box'). show (); // show}); $ ('. Sembunyikan'). Klik (function () {// atur peristiwa pemicu $ ('#box'). hide (); // hide});Dalam metode .show () dan .Hide (), parameter dapat dilewati, yang mengontrol kecepatan dalam milidetik (1000 milidetik sama dengan 1 detik). Ini juga kaya akan kecepatan konstan untuk meningkat dan berkurang, serta perubahan transparansi.
$ ('. Show'). Klik (function () {$ ('#box'). Tampilkan (1000); // butuh 1 detik untuk ditampilkan}); $ ('. Sembunyikan'). Klik (function () {$ ('#box'). Sembunyikan (1000); // butuh 1 detik untuk disembunyikan});Selain menggunakan milidetik secara langsung untuk mengendalikan kecepatan, jQuery juga menyediakan tiga string parameter kecepatan preset: lambat, normal dan cepat, sesuai dengan 600 milidetik, masing -masing 400 milidetik dan 200 milidetik.
$ ('#box'). Show ('Slow'); // 600 milidetik $ ('#box'). Tampilkan ('normal'); // 400 milidetik $ ('#box'). Show ('fast'); // 200 milidetikCatatan: Apakah melewati milidetik atau melewati string preset, jika Anda secara tidak sengaja mengeluarkan kesalahan atau melewati string kosong. Maka itu akan mengambil nilai default: 400 milidetik.
Gunakan fungsi callback dari .show () dan .hide () untuk mencapai efek animasi antrian.
(1) Panggil diri Anda menggunakan nama fungsi
$ (.
(2) Gunakan argumen.callee untuk memanggil fungsi anonim
$ (.
Ketika kita menggunakan .show () dan .Hide (), jika kita membutuhkan tombol untuk beralih, kita perlu membuat beberapa penilaian bersyarat. Dan jQuery memberi kita metode terpisah dengan fungsi yang sama: .toggle ().
$ ('. Toggle'). Klik (function () {$ (this) .toggle ('slow');});dua. Geser dan gulir jQuery menyediakan serangkaian metode untuk mengubah ketinggian elemen: .slideup (), .slidedown () dan .slidetoggle (). Seperti namanya, menyusut ke atas (gulungan) dan mengembang ke bawah (slide).
$ ('. Down'). Klik (function () {// Geser ke bawah $ ('#box'). Slidedown ();}); $ ('.Catatan: Efek geser dan gulir sama dengan tampilan dan efek tersembunyi, dan memiliki parameter yang sama.
tiga. Memudar, memudar
JQuery menyediakan serangkaian metode khusus untuk perubahan transparansi: .fadein () dan .fadeout (), yang masing -masing mewakili fade masuk dan memudar, dan tentu saja ada juga metode switching otomatis: .fadetoggle ().
$ (. });
Tiga metode transparansi di atas hanya bisa dari 0 hingga 100, atau dari 100 hingga 0. Jika kita ingin mengatur nilai yang ditentukan, tidak ada cara. JQuery menyediakan metode .fadeto () untuk menyelesaikan masalah ini.
$ ('. Toggle'). Klik (function () {$ ('#box'). fadeto ('lambat', 0.33); //0.33 berarti nilainya 33%});PS: Jumlah nilai adalah 0 hingga 1, sesuai dengan persentase
Empat. Animasi khusus
JQuery menyediakan beberapa aspek animasi tetap yang sederhana dan umum digunakan yang kami gunakan. Namun terkadang, animasi sederhana ini tidak dapat memenuhi kebutuhan kita yang lebih kompleks. Pada saat ini, JQuery menyediakan metode .animate () untuk membuat animasi khusus kami untuk memenuhi persyaratan yang lebih kompleks dan dapat diubah.
$ ('. Animate'). Klik (function () {$ ('#box'). Animate ({'width': '300px', 'fontsize': '50px', 'opacity': 0.5});});Catatan: Perubahan CSS adalah efek animasi. Dalam contoh di atas, sudah ada empat perubahan CSS, dan efek gerakan sinkron dari beberapa animasi telah tercapai.
Hanya ada satu parameter yang harus diteruskan, yang merupakan objek dengan gaya CSS pasangan-nilai kunci. Ada dua parameter opsional, yaitu fungsi kecepatan dan panggilan balik.
$ (.
Hingga saat ini, kami telah membuat animasi dengan posisi tetap yang diam. Jika Anda ingin menerapkan gambar gerakan bit dalam keadaan gerak, Anda harus menggunakan animasi khusus dan menggabungkannya dengan fungsi penentuan posisi absolut dari CSS.
$ ('. Animate'). Klik (function () {$ ('#box'). Animate ({'Top': '300px', // Posisi absolut CSS harus ditetapkan pertama 'kiri': '200px'});});PS: Objek referensi harus ditetapkan terlebih dahulu dalam CSS, dan posisi absolut
Dalam animasi khusus, setiap gerakan mulai harus dalam posisi awal atau keadaan awal, dan kadang -kadang kita ingin menghidupkannya melalui posisi atau keadaan saat ini. JQuery menyediakan fungsi menambah dan mengurangi animasi khusus.
$ (.
lima. Metode animasi antrian
Kami sudah dapat menerapkan animasi antrian sebelumnya. Jika itu adalah elemen yang sama, dapat dipanggil secara berurutan atau digabungkan. Jika itu adalah elemen yang berbeda, Anda dapat menggunakan fungsi callback. Tetapi kadang -kadang ada terlalu banyak animasi antrian, dan keterbacaan fungsi callback sangat berkurang. Untuk tujuan ini, JQuery menyediakan serangkaian metode yang secara khusus digunakan untuk animasi antrian.
// terhubung tidak dapat diimplementasikan dalam antrian urutan
$ ('#box'). Slideup ('Slow'). Slidedown ('Slow'). CSS ('Background', 'Orange');
CATATAN: Jika metode animasi dianimasikan, ligatur dapat diantri secara berurutan, sedangkan metode .css () bukan metode animasi dan akan sebelum antrian pertama kali dilewatkan. Kemudian, fungsi Callback Metode Animasi dapat digunakan untuk menyelesaikan masalah.
// Gunakan fungsi callback untuk memaksa antrian metode .css () ke .slidedown () setelah $ ('#box'). Slideup ('Slow'). Slidedown ('Slow', function ({$ (this) .css ('latar belakang', 'oranye');});Tetapi jika ini masalahnya, ketika ada banyak animasi antrian, keterbacaan tidak hanya akan berkurang, tetapi metode animasi asli tidak cukup jelas. Jadi, ide kami adalah bahwa setiap operasi adalah metode independennya sendiri. Kemudian jQuery menyediakan metode yang mirip dengan fungsi callback: .queue ().
// Gunakan metode .queue () untuk mensimulasikan metode animasi setelah mengikuti metode animasi $ ('#box'). Slideup ('Slow'). Slidedown ('Slow'). Antrian (function () {$ (this) .css ('latar belakang', 'oranye');});Sekarang, kami ingin terus menambahkan animasi tersembunyi ke metode .queue (), tetapi kami menemukan bahwa tidak mungkin untuk mengimplementasikannya. Ini disebabkan oleh fitur .queue (). Solusi: Fungsi panggilan balik dari JQuery's .queue () dapat melewati parameter, yang merupakan fungsi berikutnya. Panggil metode selanjutnya () di akhir untuk mengeksekusi animasi antrian.
// Gunakan parameter berikutnya untuk mengimplementasikan animasi antrian panggilan terus menerus $ ('#box'). Slideup ('lambat'). Slidedown ('lambat'). Antrian (fungsi (selanjutnya {$ (ini) .css ('latar belakang', 'oranye'); selanjutnya ();}). Sembunyikan ('lambat');Metode PS: .queue () juga memiliki fungsi lain, yaitu mendapatkan panjang antrian animasi saat ini (tidak ditunjukkan secara rinci)
JQuery juga menyediakan metode fungsional untuk membersihkan antrian: .clearqueue (). Masukkan ke dalam fungsi callback antrian atau metode .queue (), dan antrian yang tersisa yang dieksekusi dapat dihapus.
// bersihkan antrian animasi $ ('#box'). Slidedown ('slow', function () {$ (this) .clearqueue ()}); enam. Metode terkait animasi
Sering kali, perlu untuk berhenti menjalankan animasi, dan jQuery menyediakan metode .stop () untuk ini. Ini memiliki dua parameter opsional: .Stop (clearqueue, gotoend); Clearqueue memberikan nilai boolean, yang mewakili apakah akan menghapus antrian animasi yang tidak dieksekusi, dan Gotoend mewakili apakah akan secara langsung melompati animasi yang dieksekusi ke negara bagian terakhir.
$ ('. Animate'). Klik (function () {$ ('#box'). Animate ({'kiri': '300px'}, 1000); $ ('#box'). Animate ({'Top': '300px'}, 1000); $ ('#box'). Animate ({'width': $ ('#box'). animate ({'height': '300px'}, 1000); $ ('. Stop'). Klik (function () {$ ('#box'). Stop (true, false);});// Catatan: Parameter pertama menunjukkan apakah akan membatalkan animasi antrian, default salah. Jika parameternya benar, animasi antrian berikutnya akan dibatalkan ketika ada animasi antrian. Parameter kedua menunjukkan apakah mencapai akhir dari animasi saat ini, dan standarnya salah. Jika parameternya benar, itu akan mencapai ujung segera setelah berhenti. Anda dapat menyalin dan mengalaminya sendiri.
Kadang -kadang ketika mengeksekusi animasi atau animasi antrian, ada penundaan sebelum mosi, dan jQuery menyediakan metode .delay () untuk ini. Metode ini dapat mengatur penundaan sebelum animasi atau menambahkannya di tengah animasi antrian.
// Penundaan Mulai adalah 1 detik, penundaan tengah adalah 1 detik. $ ('. Animate'). Klik (fungsi () {$ ('#box'). Penundaan (1000) .animate ({'kiri': '300px'}, 1000); $ ('#box'). ({'BOTTOM': '100px'}, 1 {'{' {'{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{1 {{1 {{', 'Width': '300px'}, 1000);Argumen.Callee dijalankan di mana fungsi itu mewakili fungsi mana. Umumnya digunakan dalam fungsi anonim. Dalam fungsi anonim, Anda kadang -kadang perlu menyebut diri Anda, tetapi karena ini adalah fungsi anonim, ia tidak memiliki nama dan dapat disesuaikan. Pada saat ini, argumen. Callee dapat digunakan sebagai pengganti fungsi anonim
// secara rekursif menjalankan diri, tak terbatas loop mengeksekusi $ ('#box'). Slidetoggle ('lambat', function () {$ (this) .slidetoggle ('lambat', arguments.callee);});Properti $ .fx.off dapat mematikan semua efek animasi.
$ .fx.off = true; // default salah
Semua dipahami.
Di atas adalah pembagian kode efek animasi jQuery yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda.