CSS memiliki domain yang luas, sementara CSS dasar pada dasarnya disalin, itu bisa menjadi sangat rumit ketika digabungkan dengan teknologi front-end seperti JavaScript dan kerangka kerja terkait. Oleh karena itu, terlihat bahwa beberapa pengembang back-end yang sangat terampil berjuang untuk mendesain front-end situs web portofolio mereka. Banyak atribut dan properti JavaScript yang ditautkan dengan CSS jarang digunakan oleh pemula. Artikel ini menggunakan salah satu atribut tersebut untuk memudar dan akhirnya menghapus paragraf dengan mengklik tombol
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 memudarkan 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 fadeIn() dan fadeOut()
Jika elemen memudar, fadeToggle() akan memudarkannya
Jika elemen memudar, ________13______ 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)
Selamat datang di tutorial tentang cara memudarkan dan memudarkan elemen HTML. Jadi, Anda mungkin ingin memudar di suatu bagian, atau mungkin memudarkan tombol setelah diklik. Beberapa library menyediakan fungsi fade yang mudah digunakan, tetapi kami benar-benar tidak perlu memuat seluruh library hanya untuk melakukan efek fade sederhana
Memudar elemen HTML dapat dengan mudah dilakukan dengan transisi CSS dan pengaturan opacity
- Lampirkan transisi opasitas CSS pada elemen – <div id="demo" style="transition: opacity 1s">DEMO</div>
- Memudar – document.getElementById("demo").opacity = 0
- Memudar – document.getElementById("demo").opacity = 1
Itu mencakup ide dasar, mari kita telusuri beberapa contoh dalam panduan ini – Baca terus
ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk
TLDR – SLIDE CEPAT
Unduh & Catatan
UNDUH & CATATAN
Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan
CATATAN CEPAT
Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman
DOWNLOAD KODE CONTOH
Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri
FADE IN dan FADE OUT ELEMEN HTML
Baiklah, sekarang mari kita masuk ke contoh fading in & out menggunakan CSS dan Javascript
1) PUDAR PADA KLIK
1-dasar. html
<style> /* (A) FADE ANIMATION */ #fadeA { transition: opacity 1s; } #fadeA.hide { opacity: 0; } </style> <!-- (B) FADE DEMO --> <p id="fadeA">This will fade.</p> <button title="document.getElementById('fadeA').classList.toggle('hide')"> Toggle </button>Ini akan memudar
Beralih
Seperti pada pendahuluan di atas, hanya perlu melampirkan transition: opacity dan mengaktifkan opacity. Animasi CSS akan melakukan keajaiban lainnya
P. S. opacity: 0 hanya akan mengatur elemen menjadi "tidak terlihat", mempertahankan dimensinya. Jika Anda ingin menciutkannya, coba #fadeA.hide { opacity: 0; max-height: 0; }
2) PUDAR PADA HOVER MOUSE
2-fade-hover. html
/* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>_Ini akan memudar saat melayang
Ya, sesederhana itu. Cukup gunakan pseudo-class /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>0 CSS untuk membantu Anda
3) FADE HANYA MENGGUNAKAN CSS
3-css-memudar. html
<style> /* (A) HIDE CHECKBOX */ #fadeC { display: none; } /* (B) CHECKED > FADE */ #fadeD { transition: opacity 1s; } #fadeC:checked + #fadeD { opacity: 0; } </style> <!-- (C) FADE DEMO --> <label for="fadeC">Click to fade.</label> <input type="checkbox" id="fadeC"> <p id="fadeD">This will fade.</p>Tidak ada Javascript, tidak masalah. Ini adalah "trik kotak centang" kecil yang kami gunakan
- Kami membuat /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>1 tersembunyi, tetapi masih dapat diubah menggunakan /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>2
- Terakhir, gunakan pemilih saudara CSS /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>_3 untuk mengaktifkan tampilan/sembunyikan
- /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>4 dalam bahasa Inggris biasa – Jika kotak centang /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>5 dicentang, kami menyembunyikan /* (A) FADE ANIMATION */ #fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; } <!-- (B) FADE DEMO --> <p id="fadeB">This will fade on hover.</p>6
BIT & LINK EKSTRA
Itu saja untuk panduan ini, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda
LINK dan REFERENSI
- Fade Background Image – Kotak Kodex
- Bagaimana melakukan fade-in dan fade-out dengan JavaScript dan CSS – Stack Overflow
- Fade-In Halaman Sederhana Dengan JavaScript – buaya. io
LEMBAR CHEAT INFOGRAFIS
Terima kasih telah membaca, dan kami telah sampai di akhir panduan ini. Saya harap ini membantu Anda dengan proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode