TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com

Bagian 6. Menggunakan JQuery Effect

1

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 Method animate() clearQueue() delay() dequeue() fadeIn() fadeOut() fadeTo() fadeToggle() finish() hide() queue() show() slideDown() slideToggle()

2

slideUp() stop() toggle()

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. <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("button.sembunyi").click(function(){ $("p, #title-article, .author").hide(); }); $("button.tampil").click(function(){ $("p, #title-article, .author").show(); }); });

Latihan JQuery Bagian 6

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Sembunyikan Tampilkan

3

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. Sebagai contohnya : <script type="text/javascript" src="jquery-1.11.1.min.js"> <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"); });

});

Latihan JQuery Bagian 6

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Sembunyikan Tampilkan

Menggunakan JQuery fadeIn() dan fadeOut()

4

fadeIn untuk menampilkan elemen html secara perlahan secara fade (memudar) dan fadeOut adalah sebaliknya, yakni menyembunyikan. <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("button.sembunyi").click(function(){ $("p").fadeOut(); $("#title-article").fadeOut(); $(".author").fadeOut(); }); $("button.tampil").click(function(){ $("p").fadeIn(); $("#title-article").fadeIn(); $(".author").fadeIn(); });

});

Latihan JQuery Bagian 6

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Sembunyikan Tampilkan

Menggunakan JQuery slideUp( ) dan slideDown( ) Selain show, hide, fadeIn, fadeOut, jquery pun menyediakan slideUp dan slideDown untuk memberikan effect terhadap sebuah elemen yang terkena dampak dari event JQuery. slideUp dan slideDown ini memiliki effect rolling, seperti kertas di gulung. Bagaimana menggunakannya? Contohnya adalah sebagai berikut :

5

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("button.sembunyi").click(function(){ $("p, #title-article, .author").slideUp(); });

});

$("button.tampil").click(function(){ $("p, #title-article, .author").slideDown(); });

Latihan JQuery Bagian 6

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Sembunyikan Tampilkan

Menggunakan JQuery Animate Jquery Animate merupakn fitur dari jquery effect yang paling sering digunakan, terutama yang berhubungan dengan content slider, yakni membuat animasi content berjalan, geser kiri, geser kanan, dan kombinasi dari itu semua. Bagaimana menggunakan JQuery animate ? Perlu diketahui Secara default semua element HTML memiliki position static, sehingga tidak bisa di geser, di pindah dan manipulasi bentuk lainnya, sehingga untuk bisa geser kanan kiri atas bawah, pindah kanan kiri atas bawah harus dirubah terlebih dahulu positionnya, menjadi relatice, fixed, maupun absolute.



6

<script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height:'toggle' }); }); }); Mulai Animasi

Secara default semua element HTML memiliki position static, sehingga tidak bisa di geser, di pindah dan manipulasi bentuk lainnya, sehingga untuk bisa geser kanan kiri atas bawah, pindah kanan kiri atas bawah harus dirubah terlebih dahulu positionnya, menjadi relatice, fixed, maupun absolute.

Contoh lainnya : <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({width:'300px',opacity:'0.8'},"slow"); $("div").animate({height:'100px',opacity:'0.4'},"slow"); $("div").animate({width:'100px',opacity:'0.8'},"slow"); }); }); Mulai Animasi

7

Selain height dan width, bisa juga menggunakan left right top bottom. Sebagai contohnya kita akan menggunakan left, dan juga fontSize <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'100px'},"slow"); $("div").animate({fontSize:'3em'},"slow"); }); }); Mulai Animasi

Contoh Animate lainnya <script src="jquery-1.11.1.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px',

8

});

opacity:'0.5', height:'150px', width:'150px'

}); }); Mulai Animasi

Menggunakan JQuery Toggle Sebelumya kita telah menggunakan JQuery Show dan Hide secara berbarengan menggunakan 2 button. Namun bagaimana jika hanya dengan 1 button bisa melakukan effect show dan hide? Caranya adalah dengan Toggle <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("button").click(function(){ $("p, #title-article, .author").toggle(); }); });

Latihan JQuery Bagian 6

9

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Button Toggle

Menggunakan JQuery slideToggle slideToggle mirip dengan Toggle, namun memiliki effect rolling, atau gulung, jauh lebih cantik ketimbang Toggle. Bagaimana menggunakannya. <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ $("button").click(function(){ $("p, #title-article, .author").slideToggle(); }); });

Latihan JQuery Bagian 6

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Button Toggle

10