Efek - efek Pada JQuery - Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,menggerakan elemen, dan menganimasikan elemen tersebut.
Ketika kita membuat websita kita ingin agar tampilan website kita lebih menarik dan artistik, agar membuat tampilan website kita lebih cantik kita dapat menambahkan efek - efek pada halaman website agar terlihat keren.
nah, dengan JQuery kita dapat membuat animasi dan efek - efek yang keren seperti menyemunyikan text, membuat slide, membuat animasi text dan lain - lain.
1. Efek Fade()
Efek fade digunakan untuk menampilkan atau menghilangakan elemen secara perlahan-lahan, biasa digunakan untuk tranisi/pergantian suatu objek dengan objek yang lain seperti menu dan sub menu, sehingga transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln, fadeOut, dan fadeTo. sebagai contoh coba script berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.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>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Coba anda tekan tombol fade out, maka kotak akan hilang. kemudian coba anda tekan kembali fade in maka kotak akan kembali, sekarang coba anda tekan fade to 0,3 maka warna akan berubah menjadi kabur/blur.
2. Efek Slide
Efek slide digunakan untuk menghilangkan atau menampilkan elemen menjadi seperti membuka dan menutup, terdapat tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle. coba perhatikan contoh script berikut ini :
Coba anda klik pada "Tekan untuk menampilkan pesan" maka akan muncul sebuah pesan dengan efek slide. kemudian apa bila anda klik kembali maka pesan akan tersembunyi kembali.
Efek animate digunakan untuk menggerakkan/menganimasikan suatu elemen.Dengan penulisan sintaksnya:
Keterangan
- Params adalah yang mendefinisikan properti dari elemen yang akan dianimasikan dan banyak properti yang bisa dianimasikan dalam waktu yang sama.
- Duration adalah yang mendefinisikan berapa waktu yang digunakan untuk menjalankan animasi, contohnya fast, slow, normal, atau bisa juga dalam bentuk milisecond, contohnya 5000=5 detik.
Sebagai contoh coba lihat script di bawah :
Sekarang coba anda klik jalankan, maka kotak merah akan bergerak ke arah samping.
Penting :
Untuk mencoba praktek JQuery ini anda harus mendownload JQuery terlebih dahulu dari website utamanya secara gratis. kemudian simpan ke dalam folder yang sama dengan folder projek anda.
Sekarang coba anda gabungkan ketiga event tersebut dengan kreatifitas anda selamat belajar.
Contoh program Efek - efek Pada JQuery anda sekarang sudah selesai, Baca juga tutorial program jQuery lainnya.
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.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>
Coba anda klik pada "Tekan untuk menampilkan pesan" maka akan muncul sebuah pesan dengan efek slide. kemudian apa bila anda klik kembali maka pesan akan tersembunyi kembali.
3. Efek Animate
Efek animate digunakan untuk menggerakkan/menganimasikan suatu elemen.Dengan penulisan sintaksnya:
$(selector).animate({params},[duration],[easing],[callback])
Keterangan
- Params adalah yang mendefinisikan properti dari elemen yang akan dianimasikan dan banyak properti yang bisa dianimasikan dalam waktu yang sama.
- Duration adalah yang mendefinisikan berapa waktu yang digunakan untuk menjalankan animasi, contohnya fast, slow, normal, atau bisa juga dalam bentuk milisecond, contohnya 5000=5 detik.
Sebagai contoh coba lihat script di bawah :
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.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 anda klik jalankan, maka kotak merah akan bergerak ke arah samping.
Penting :
Untuk mencoba praktek JQuery ini anda harus mendownload JQuery terlebih dahulu dari website utamanya secara gratis. kemudian simpan ke dalam folder yang sama dengan folder projek anda.
Sekarang coba anda gabungkan ketiga event tersebut dengan kreatifitas anda selamat belajar.
Contoh program Efek - efek Pada JQuery anda sekarang sudah selesai, Baca juga tutorial program jQuery lainnya.
0 komentar