Bagian 6. Menggunakan JQuery Effect

Sebelumnya kita telah mempelajari JQuery Event, meskipun sudah bersinggungan dengan jquery effect yakni hide( ) tapi kita akan lebih memperdalamnya di bagian ini.

JQuery effect adalah kondisi ketika suatu event terjadi, maka si penderitanya akan mendapatkan effect atau dampaknya. Misalkan jika button di klik maka paragraph akan di sembunyikan. Nah di sembunyikannya ini adalah effect. Dalam hal ini hide().

Apa saja sih yang termasuk ke dalam JQuery effect

Baca Juga

Namun disini kita akan mempelajari yang sering digunakan saja dalam dunia web development.

Yakni : animate( ) , fadeIn( ), fadeOut( ), hide( ), show( ), slideDown( ), slideUp( ), slideToggle( ), toggle( )

Menggunakan JQuery Hide dan Show Untuk contoh awal kita akan mencoba menggunakan JQuery hide dan show secara berbarengan.




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function( ){
$("button.sembunyi").click(function(){
$("p, #title-article, .author").hide();
});
$("button.tampil").click(function(){
$("p, #title-article, .author").show();
});
});
</script>
</head>
<body>
<h1 id="title-article">Latihan JQuery Bagian 6</h1>
<em class="author">Oleh : Loka Dwiartara</em>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
</body>
</html>

Hasilnya adalah jika kita mengklikkan button dengan class sembunyi, maka semua elemen yakni elemen html p, elemen html yang punya ID #title-article, dan elemen html yang punya class .author diwakili dengan selector $("p, #title-article, .author") akan di sembunyikan, begitu sebaliknya. Anda bisa melakukan settingan kecepatan dari hide dan shownya, bisa menggunakan satuan milisecond, bisa menggunakan settingan fast, normal, dan slow.

Download source code latihan

Sebagai contohnya :




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function( ){
$("button.sembunyi").click(function(){
$("p").hide(500);
$("#title-article").hide("fast");
$(".author").hide("slow");
});
$("button.tampil").click(function(){
$("p").show(2000);
$("#title-article").show("slow");
$(".author").show("normal");
});
});
</script>
</head>
<body>
<h1 id="title-article">Latihan JQuery Bagian 6</h1>
<em class="author">Oleh : Coding Website Gratis</em>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
</body>
</html>

Untuk selengkapnya silahkan download disini