jQuery Effect

Di halaman ini kita akan mempelajari menggunakan efek sederhana pada jQuery.



jQuery Hide dan Show

Kedua fungsi hide() dan show() memiliki dua parameter opsional : kecepatan dan callback.

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});

sintak:

$(selector).hide(speed,callback)
$(selector).show(speed,callback)


Parameter speed menentukan kecepatan, dan dapat mengambil nilai-nilai berikut : "slow " , " fast " , " normal" , atau angka dalam millidetik


$("button").click(function(){
  $("p").hide(1000); // 1 detik
});

jQuery Toggle

Metode jQuery toggle() mengubah visibilitas dari elemen HTML menggunakan metode show() atau hide(). Unsur yang ditampilkan tersembunyi dan elemen yang tersembunyi akan ditampilkan. 

sintak: 


$ (selector).toggle(speed, callback);


Parameter speed dapat menggunakan nilai-nilai berikut: "slow", "fast", "normal", atau milidetik.

$("button").click(function(){
  $("p").toggle();
});

 

jQuery Slide - slideDown, slideUp, slideToggle 

metode slide() pada jQuery secara bertahap akan mengubah ketinggian untuk elemen yang dipilih.  jQuery memiliki metode slide yang berikut: 

  • $ (selector).slideDown (speed, callback) 
  • $ (selector).slideUp (speed, callback) 
  • $ (selector).slideToggle (speed, callback) 


Parameter speed dapat menggunakan nilai-nilai berikut: "slow", "fast", "normal", atau milidetik. Parameter callback adalah nama dari sebuah fungsi untuk dieksekusi setelah fungsi selesai.


$(".flip").click(function(){
  $(".panel").slideDown();
});


$(".flip").click(function(){
  $(".panel").slideUp()
})
$(".flip").click(function(){
  $(".panel").slideToggle();
});



jQuery Fade - fadeIn, fadeOut, fadeTo 

Metode jQuery fade secara bertahap mengubah opacity untuk elemen yang dipilih. jQuery fade memiliki metode berikut: 


$ (selector).fadeIn (speed, callback) 

$ (selector).fadeOut (speed, callback) 

$ (selector).fadeTo (speed, opacity, callback) 


Parameter speed dapat mennggunakan nilai-nilai berikut: "slow", "fast", "normal", atau milidetik. Parameter opacity dalam metode fadeTo() memungkinkan fade ke opacity diberikan. Parameter callback adalah nama dari sebuah fungsi untuk dieksekusi setelah fungsi selesai


$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});
$("button").click(function(){
  $("div").fadeOut(4000);
});
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda