Parameter kecepatan opsional menentukan durasi efek. Itu dapat mengambil nilai-nilai berikut. "lambat", "cepat", atau milidetik
Parameter callback opsional adalah fungsi yang akan dijalankan setelah fading selesai
Contoh berikut menunjukkan metode fadeIn() dengan parameter yang berbeda
Contoh
$("tombol"). klik(fungsi(){
$("#div1"). fadeIn();
$("#div2"). fadeIn("lambat");
$("#div3"). fadeIn(3000);
});
Metode jQuery fadeOut()
Metode jQuery fadeOut() digunakan untuk menghilangkan elemen yang terlihat
Sintaksis
$(pemilih). fadeOut(kecepatan,panggilan balik);
Parameter kecepatan opsional menentukan durasi efek. Itu dapat mengambil nilai-nilai berikut. "lambat", "cepat", atau milidetik
Parameter callback opsional adalah fungsi yang akan dijalankan setelah fading selesai
Contoh berikut menunjukkan metode fadeOut() dengan parameter yang berbeda
Contoh
$("tombol"). klik(fungsi(){
$("#div1"). fadeOut();
$("#div2"). fadeOut("lambat");
$("#div3"). fadeOut(3000);
});
Metode jQuery fadeToggle()
Metode jQuery fadeToggle() beralih antara metode ________4______ dan fadeOut()
Jika elemen memudar, fadeToggle() akan memudarkannya
Jika elemen memudar, fadeToggle() akan memudarkannya
Sintaksis
$(pemilih). fadeToggle(kecepatan,panggilan balik);
Parameter kecepatan opsional menentukan durasi efek. Itu dapat mengambil nilai-nilai berikut. "lambat", "cepat", atau milidetik
Parameter callback opsional adalah fungsi yang akan dijalankan setelah fading selesai
Contoh berikut menunjukkan metode fadeToggle() dengan parameter yang berbeda
Contoh
$("tombol"). klik(fungsi(){
$("#div1"). fadeToggle();
$("#div2"). fadeToggle("lambat");
$("#div3"). fadeToggle(3000);
});
Metode jQuery fadeTo()
Metode jQuery fadeTo() memungkinkan memudar ke opacity tertentu (nilai antara 0 dan 1)
Sintaksis
$(pemilih). fadeTo(kecepatan, opasitas, panggilan balik);
Parameter kecepatan yang diperlukan menentukan durasi efek. Itu dapat mengambil nilai-nilai berikut. "lambat", "cepat", atau milidetik
Parameter opacity yang diperlukan dalam metode fadeTo() menentukan pemudaran ke opacity yang diberikan (nilai antara 0 dan 1)
Membuat efek css fade dengan javascript cukup sederhana. Saya telah membuat dua contoh untuk tutorial ini
Pada contoh pertama kita akan memiliki kontrol untuk memudar dan keluar elemen
Dan pada contoh kedua kita akan melihat cara membuat tombol untuk mengaktifkan dan menonaktifkan efek fade
Mari kita lihat contohnya, dan mulai dari yang pertama
Mengontrol efek css fade
Dalam contoh ini kami memiliki dua tombol yang mengontrol efek fade-in dan fade-out
Kode html
Kode html sangat sederhana
Fade Out Fade In- Sejalan 1 kita memiliki elemen div dengan kelas ". kotak". Kami akan menggunakan ". box" untuk menargetkan elemen dengan javascript
- Sejalan 3 dan 4 kami memiliki dua tombol. Setiap tombol memiliki id unik. Sekali lagi kita akan menargetkan tombol-tombol itu dengan javascript menggunakan id mereka
Sebelum kita melihat kode javascript, kita harus melihat aturan css yang kita terapkan, ke elemen div dan yang penting agar efeknya bekerja
Kode css
Mari kita lihat apa yang kita miliki di kode css
.box{ width: 300px; height: 200px; background-color: #333; transition: opacity .5s; margin-bottom: 20px; } .box.fade-out{ // .box .fade-out will not work with space between the two rules. opacity: 0; } _- Di baris 1 kami menargetkan ". box" untuk membuat elemen div terlihat seperti kotak
- Pada baris 5 kita menambahkan properti transisi ke opasitas elemen, dan mengatur durasinya menjadi 0. 5 detik. Properti transisi akan memberi kita animasi fading yang akan bertahan setengah detik
- Pada baris 9 kita menulis ". fade-out" aturan kelas yang kami terapkan pada ". kelas kotak". Kami akan memanipulasi ". kelas fade-out" dengan javascript
Jika Anda meninggalkan ruang antara ". kotak" aturan dan ". fade-out" aturan kode tidak akan berfungsi
- Di dalam ". fade-out" aturan kami mengatur opacity ke nol. Ini akan membuat kotak tidak terlihat, tetapi tidak langsung karena kami menambahkan properti transisi ke ". kotak" aturan
Inilah cara kami membuat efek css fade. Sekarang mari beralih ke kode javascript
Kode javascript
Berikut kode javascriptnya
Di sini kita akan menambah dan menghapus ". fade-out" ke elemen kotak
- Pada baris 1 kita menargetkan tombol fade-in dan menyimpan objek dalam variabel fadeInButton
- Kami melakukan hal yang sama dengan tombol fade-out di baris 2
- Dan lagi kami melakukan hal yang sama dengan elemen kotak di baris 3
- Sejalan 5 kami menambahkan pendengar acara title ke tombol fade-out, jadi setiap kali kami mengklik tombol, sebuah fungsi akan berjalan
- Di dalam fungsi di baris 6 kita akan menargetkan elemen kotak dan menambahkan kelas "fade-out".
Ini akan membuat elemen kotak memudar - Sejalan 9 kita melakukan hal yang sama dengan tombol fade-in, tetapi di dalam fungsi kali ini kita akan menghapus kelas "fade-out". Ini akan membuat elemen kotak memudar secara bertahap
Contoh ini tentang bagaimana mengontrol transisi css fade dengan dua tombol, satu tombol untuk efek fade-in, dan tombol lainnya untuk efek fade-out
Sekarang mari beralih ke contoh kedua untuk melihat bagaimana kita dapat mengaktifkan efek css fade menggunakan satu tombol
Alihkan efek css fade
Pada contoh kedua kita hanya akan memiliki satu tombol yang akan kita gunakan untuk mengaktifkan efek fade
Cobalah
Kode html
Sekali lagi hal-hal di sini sangat sederhana
Fade toggle- Kami memiliki lagi elemen div dengan ". kotak" kelas di baris 1
- Dan di baris 2 kita memiliki tombol toggle yang memiliki id "toggle"
Tidak ada perubahan pada kode css, jadi kita langsung menuju ke kode javascript
Kode javascript
Seperti yang kita lakukan pada contoh pertama, kita akan menambah dan menghapus ". fade-out" ke elemen kotak. Hanya saja kali ini kita akan menggunakan pernyataan if untuk melakukannya