Mengubah tingkat transparansi item yang dipilih Di halaman. Memungkinkan Anda mengubah transparansi dengan lancar. Metode ini memiliki dua kegunaan:
durasi— durasi perubahan transparansi. Dapat diberikan dalam milidetik atau nilai string "cepat" atau "lambat" (200 dan 600 milidetik).
kegelapan— nilai transparansi yang diperlukan. Harus ditentukan sebagai angka dari 0 hingga 1 (0 - transparansi penuh, 1 - tidak ada transparansi).
panggilan balik adalah fungsi yang ditentukan sebagai pengendali penyelesaian perubahan transparansi. Tidak ada parameter yang diteruskan ke sana, namun, di dalam fungsi, variabel ini akan berisi objek DOM dari elemen yang transparansinya diubah. Jika ada beberapa elemen seperti itu, maka handler akan dipanggil secara terpisah untuk setiap elemen.
durasi- lihat deskripsi di atas. Secara default, parameternya adalah 400
kegelapan- Lihat di atas.
meringankan- dinamika perubahan transparansi (apakah akan melambat pada akhir proses atau, sebaliknya, akan berakselerasi). ( Lihat deskripsi)
panggilan balik- Lihat di atas.
- mengubah transparansi
- mengatur transparansi elemen
- mengatur tingkat transparansi suatu elemen
- transparansi elemen
- .fadeTo()
- memudarKe()
Pembaruan terakhir: 1.11.2015
Efek transparansi memungkinkan kita untuk mengubah transparansi elemen dengan lancar, menyembunyikannya, atau menampilkannya. Efek transparansi diimplementasikan menggunakan metode fadeOut() , fadeIn() , fadeTo() , dan fadeToggle() .
Metode fadeOut() , fadeIn() , dan fadeToggle() memiliki kegunaan yang serupa:
fadeOut/fadeIn/fadeToggle() : metode tanpa parameter
fadeOut/fadeIn/fadeToggle( [, easing][, complete]) . Parameter durasi menentukan berapa lama perubahan transparansi elemen akan berlangsung. Nilai defaultnya adalah 400 milidetik.
Parameter easing, yang mengambil nama fungsi easing animasi sebagai string. Nilai defaultnya adalah "ayunan". Anda juga dapat menggunakan nilai "lambat" dan "cepat", yang sesuai dengan durasi efek dalam 600 dan 200 milidetik.
Parameter lengkap mewakili fungsi panggilan balik yang akan dipanggil metode saat animasi selesai.
Metode fadeTo, tidak seperti metode lainnya, juga menerima parameter opacity - dibutuhkan nilai yang harus diubah transparansi elemennya: fadeTo(duration, opacity [, easing][, complete]) . Nilai opacity adalah nilai antara 0 (sepenuhnya transparan) dan 1 (sepenuhnya terlihat).
Katakanlah kita memiliki gambar di halaman dan dua tombol yang akan mengubah transparansi gambar ini:
Perhatikan bahwa metode fadeIn meningkatkan transparansi ke nilai yang dimilikinya sebelum metode fadeOut digunakan, tidak harus 1. Yaitu, dalam kasus ini, karena metode fadeTo diterapkan di awal dan transparansi diubah menjadi 0,6, metode fadeIn juga akan meningkatkan transparansi menjadi 0,6.
Dan sekali lagi saya menyambut Anda para pembaca blog yang terkasih. Hari ini saya ingin memberi tahu Anda cara membuatnya transparansi halus dari setiap elemen di situs menggunakan jQuery. Apa artinya untuk elemen apa pun? Ini berarti Anda dapat menerapkan transparansi ini ke gambar, penghitung, dan tag apa pun di situs. Semua ini hanya akan menghiasi sumber daya Anda. Jadi mari kita mulai.
Biarkan saya mengingatkan Anda bahwa megaweb.su berbagi skrip dengan kami, yang banyak terima kasih kepadanya.
Naskah
Hal pertama yang harus dilakukan adalah memasukkan perpustakaan jQuery, dalam arti, skrip yang perlu Anda letakkan di bawah di antara tag dan .
Kemudian, tepat sebelum tag salin dan tempel berikut ini skrip jQuery:
Disalin? Selamat, sebagian besar pekerjaan yang telah Anda lakukan :-)
Pengaturan skrip
Anda dapat sepenuhnya menyesuaikan skrip ini sesuai selera Anda.
- $('.megaweb') adalah nama kelas yang akan diterapkan ke elemen web;
- animate((opacity:'0.3'),1);- ini adalah transparansi elemen yang paling optimal;
- animate((opacity:'1.0'),600);- transparansi elemen web saat melayang;
- animate((opacity:'0.3'),300);- mengembalikan elemen ke transparansi pertama, setelah kursor dihapus dari elemen.
Setelah kita mengonfigurasi skrip sesuai kebutuhan, skrip dapat diterapkan ke elemen desain web menggunakan kelas, misalnya.