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 :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.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.

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.12.4.min.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 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:

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.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 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.