jQuery : Effect

Effect

Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,menggerakan elemen, dan menganimasikan elemen tersebut.

A. Efek Fade()

Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahanlahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan objek yang lain, sehingga transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln,fadeOut,danfadeTo. Untuk lebih jelasnya, lihat contoh sederhana pada skrip berikut :



Efek FadeIn, FadeOut dan FadeTo





Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kotak berwarna kuning dan tiga buah tombol. Coba klik tombol fade out, maka kotak akan menghilang, kemudian coba klik tombol fade in untuk menampilkan kotak kembali. Dan terakhir coba klik tombol fade to 0.3, maka kotak akan terlihat pudar warnanya Kita juga bisa mengatur waktu untuk efek fade dengan menggunakan fungsi set time Out,misalnya dalam waktu3detik, maka elemen teksnyaakan menghilang dari pandangan.

 

B. Efek slide()

Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutup sesuatu. Ada tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle. Untuk lebih jelasnya, lihat contoh pada skrip berikut:




efek slide

Sukses bukanlah kunci kebahagiaan

Kebahagiaanlah kunci kesuksesan<

Jika senantiasa melakukan segala sesuatu dengan penuh
cinta, maka anda akan sukses

Tampilkan/sembunyikan pesan


Pada Skrip diatas, kita hanya menggunakan sebuah fungsi slide, yaitu slideToggle yang berfungis menberikan efek slide apabila pada eleen belum ada efek slidenya, sedangkan menghilangkan efek slide apabila pada elemen tersebut sudah ada efek slidenya, jadi fungsi slideToggle mencakup dua buah fungsi slide lainnya, yaitu slideUp dan slideDown.

Sekarang, coba jalankan skrip diaas, maka akan tampil teks Tampilkan/Sembunyikan
pesan, coba klik pada teks tersebut, maka akan tampil pesan dengan efek slide.

C. Efek Animate()

Efek animate digunakan untuk menggerakkan/menganimasikan suatu elemen.
Adapun sintaksnya:
$(selector).animate({params},[duration],[easing],[callback])

Keterangan

  • Paramsyang mendefinisikan properti dari elemen yang akan dianimasikan dan banyak properti yang bisa dianimasikan dalam waktu yang sama.
  • Durationyang mendefinisikan berapa waktu yang digunakan untuk menjalankan animasi, contohnya fast, slow, normal, atau bisa juga dalam bentuk milisecond, contohnya 5000=5 detik.

Untuk lebih jelasnya, lihat contoh animasi sederhana pada skrip berikut:






Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kota berwarna merah dengan tombol Jalankan diatasnya. Coba klik tombol Jalankan, maka kota akan bergerak dari kiri ke kanan, kemudian membesar dan bergerak atas lalu ke kanan, lalu mengecil lagi ke ukuran semula dan terakhir bergerak ke bawah menuju posisi semula sambil melakukan efek slide.

Jangan Lupa Komen , Share Dan Likenya 🙂

Spread the love

Fajar (Ucup)

Pemilik dan Author dari FajarYusuf.com dan juga seseorang yang gemar membagikan info menarik kepada orang lain.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *