Penggunaan Effects Pada Element Jquery
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 perlahan-lahan, 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;
<html><head><script type="text/javascript" src="jquery-1.4.3.js"></script><script type="text/javascript">$("document").ready(function(){$(".fadeout").click(function(){$("#kotak").fadeOut("slow");});$(".fadein").click(function(){$("#kotak").fadeIn("slow");});$(".fadeto3").click(function(){$("#kotak").fadeTo("slow",0.3);});});</script><style type="text/css">#kotak{width:250px;height:180px;background:yellow;border:2px solid black;}</style><title>Efek FadeIn, FadeOut dan FadeTo</title></head><body><div id="kotak"></div><br/><button class="fadeout">Fade Out</button><button class="fadein">Fade In</button><button class="fadeto3">Fade To 0.3</button></body></html>
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. Untuk lebih jelasnya, simak skrip berikut:
Sekarang coba jalankan skrip diatas maka akan tampil sebuah kotak berwarna kuning terang dengan teks berwarna hitam dan pada waktu 3detik kotak dan teks akan menghilang secara perlahan-lahan.
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:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".flip").click(function(){
$(".pesan").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.pesan {
height:120px;
display:none;
}
div.pesan, p.flip{
margin:0px;
padding:0px;
text-align:center;
background:lightyellow;
border:1px solid black;
}
</style>
<title>efek slide</title>
</head>
<body>
<div class="pesan">
Sukses bukanlah kunci kebahagiaan<br/>
Kebahagiaanlah kunci kesuksesan<p>
Jika senantiasa melakukan segala sesuatu dengan penuh cinta, maka anda akan sukses</p>
</div>
<p class="flip"> Tampilkan/sembunyikan pesan</p> </body>
</html>
Pada Skrip diatas, kita hanya menggunakan sebuah fungsi slide, yaitu slideToggle yang berfungsi memberikan efek slide apabila pada elemen 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:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".mulai").click(function(){
$("#kotak").animate({left:300},"slow")
});
});
</script>
<style type="text/css">
#kotak{
position:relative;
width:100px;
height:100px;
background:red
}
</style>
<title>Animasi dengan fungsi animate</title>
</head>
<body>
<input type="submit" class="mulai" value="Jalankan" />
<div id="kotak></div>
</body>
</html>
Sekarang coba jalankan, maka akan tampil sebuah kotak berwarna merah dengan tombol Jalankan diatasnya, coba klik tombol Jalankan, maka kotak akan bergerak dari kiri ke kanan.
Ket: Kotak bergerak dari kiri ke kanan sebanyak 300px
Kita juga bisa memanggil efek animate beberapa kali sekaligus dalam satu function bahkan kita bisa
menggabungkan dengan efek yang lain seperti efek slide, efek fade. Contohnya dapat dilihat pada skrip berikut :
<html>
<head>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".mulai").click(function(){
$("#kotak").animate({left:"400"},"slow") .
.animate({top:"-160",height:"200",width:"200"},"slow") .animate({left:"0",height:"100",width:"100"},"slow")
.animate({top:"0"},"slow")
.slideUp()
.slideDown("slow");
});
});
</script>
<style type="text/css">
#kotak {
position:relative;
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/>
<button class="mulai">Jalankan</button>
<br/><br/><br/><br/><br/><br/><br/>
<div id="kotak"></div>
</body>
</html>
Sekarang coba jalankan skrip animasi.html, maka akan tampil sebuah kota berwarna merah dengan tombol Jalankan diatasnya. Coba klik tombol Jalankan, maka kota akan bergerak dari 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.
CARA MEMBUAT PLUGIN JQUERY UI -
PENGGUNAAN DATEPICKER -
PENGELOMPOKAN KOMPONEN DENGAN CARA ACCORDION -
CARA MEMBUAT KOTAK DIALOG DENGAN JQUERY -
0 Response to " Penggunaan Effects Pada Element Jquery "
Post a Comment