Belajar JQuery : Effects

posted in: Tutorial Pemrograman | 0

jQuery menyediakan interface sederhana untuk melakukan berbagai jenis efek yang bagus. Metod jQuery memungkinkan kita untuk menerapkan efek yang umum digunakan dengan konfigurasi minimum dan mudah.

Tutorial ini mencakup beberapa metod jQuery yang penting untuk menciptakan efek visual.

Menampilkan dan Menyembunyikan Elements

Perintah berikut untuk menampilkan dan menyembunyikan elemen – show () untuk menampilkan elemen, dan hide () untuk menyembunyikannya.

Syntax

Berikut adalah sintax show()

[selector].show( speed, [callback] );

  • speed – String yang menunjukan 3 kecepatan yang telah ditentukan (“slow”, “normal”, or “fast”) or atau animasi dalam satuan millidetik (misal. 1000).
  • callback – Parameter bersifat optsional yang bisa berisi fungsi yang dieksekusi saat animasi lengkap/berhasil.

Berikut adalah syntax hide()

[selector].hide( speed, [callback] );

Berikut adalah penjelasan untuk method hide()

  • speed – String yang menunjukan kecepatan yang telah ditentukan (“slow”, “normal”, atau “fast”) atau animasi dalam satuan milidetik (e.g. 1000).
  • callback − Parameter bersifat optsional yang bisa berisi fungsi yang dieksekusi saat animasi lengkap/berhasil.

Contoh

Perhatikan file HTML berikut dengan coding JQuery −

<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {

$("#show").click(function () {
$(".mydiv").show( 1000 );
});

$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});

});
</script>

<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:100px;}
</style>
</head>

<body>

<div class = "mydiv">
This is a SQUARE
</div>

<input id = "hide" type = "button" value = "Hide" />
<input id = "show" type = "button" value = "Show" />

</body>
</html>

Toggling Elements

jQuery menyediakan metode untuk beralih dari keadaaan ‘tampil’ ke ‘sembunyi’ atau sebaliknya.

Syntax

Berikut adalah sintax untuk method toggle()

[selector]..toggle([speed][, callback]);

Here is the description of all the parameters −

  • speed – String yang menunjukan kecepatan yang telah ditentukan (“slow”, “normal”, atau “fast”) atau animasi dalam satuan milidetik (e.g. 1000).
  • callback − Parameter bersifat optsional yang bisa berisi fungsi yang dieksekusi saat animasi lengkap/berhasil.

Contoh

Berikut adalah contoh menganimasi elemen yang <div> yang berisi image −


<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
$(".clickme").click(function(event){
$(".target").toggle('slow', function(){
$(".log").text('Transition Complete');
});
});
});

</script>

<style>
.clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;}
</style>
</head>

<body>

<div class = "content">
<div class = "clickme">Click Me</div>
<div class = "target">
<img src = "./images/jquery.jpg" alt = "jQuery" />
</div>
<div class = "log"></div>
</div>

</body>
</html>

JQuery Effect Methods

Anda telah melihat konsep dasar Efek jQuery. Berikut daftar tabel metode yang penting untuk berbagai jenis efek −

S.N. Methods & Description
1 animate( params, [duration, easing, callback] )

Membuat custom animasi.

2 fadeIn( speed, [callback] )

Fade in semua elemen yang cocok dengan mengatur opacity, dan memanggil callback setelah lengkap/selesai.

3 fadeOut( speed, [callback] )

Fade out semua elemen yang cocok dengan mengatur opacity, dan memanggil callback setelah lengkap/selesai.

4 fadeTo( speed, opacity, callback )

Fade opacity seluruh elemen yang cocok pke nilai tertentu, dan memanggil optional callback after setelah lengkap/selesai.

5 hide( )

Menyembunyikan setiap elemen yang cocok.

6 hide( speed, [callback] )

Sama seperti fungsi hide, hanya dengan tambahan parameter speed dan callback function.

7 show( )

Menampilkan setiap elemen yang cocok.

8 show( speed, [callback] )

Sama seperti fungsi show, hanya dengan tambahan parameter speed dan callback function.

9 slideDown( speed, [callback] )

Menampilkan semua elemen yang cocok dengan menyesuaikan tinggi dan memanggil callback opsional setelah selesai.

10 slideToggle( speed, [callback] )

Mengaktifkan visibilitas semua elemen yang cocok dengan menyesuaikan tinggi mereka dan memanggil callback opsional setelah selesai.

11 slideUp( speed, [callback] )

Menyembunyikan semua elemen yang cocok dengan menyesuaikan tinggi mereka dan memanggil callback opsional setelah selesai.

12 stop( [clearQueue, gotoEnd ])

Menghentikan semua animasi yang sedang berjalan pada semua elemen tertentu.

13 toggle( )

Beralih menampilkan setiap himpunan elemen yang cocok.

14 toggle( speed, [callback] )

Beralih menampilkan masing-masing himpunan elemen yang cocok menggunakan animasi dan memanggil callback opsional setelah selesai.

15 toggle( switch )

Beralih menampilkan masing-masing himpunan elemen yang cocok berdasarkan switch (true menunjukan semua elemen, false menyembunyikan palsu semua elemens).

16 jQuery.fx.off

Secara global mematikan semua animasi.

Leave a Reply