jQuery Efek - Pengecilan dan Pengembangan

Dengan jQuery, Anda dapat mencapai efek pengecilan dan pengembangan elemen.

Demosi efek

Klik di sini untuk menyembunyikan/menampilkan panel

Satu inch waktu seperti emas, jadi, kami menyediakan konten belajar yang cepat dan mudah dipahami.

Di sini, Anda dapat memperoleh pengetahuan yang Anda butuhkan dengan cara yang mudah dan nyata.

Contoh

jQuery fadeIn()
Demosi metode jQuery fadeIn()
jQuery fadeOut()
Demosi metode jQuery fadeOut()
jQuery fadeToggle()
Demosi metode jQuery fadeToggle()
jQuery fadeTo()
Demosi metode jQuery fadeTo()

Metode Fading jQuery

Dengan jQuery, Anda dapat mencapai efek pengecilan dan pengembangan elemen.

jQuery memiliki empat metode fade berikut:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Metode jQuery fadeIn()

Metode jQuery fadeIn() digunakan untuk memudar masuk elemen yang tersembunyi.

Sintaks:

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

Parameter speed menentukan lama efek. Ini dapat diambil nilai berikut: "slow", "fast", atau milidetik.

Parameter callback Parameter adalah nama fungsi yang dieksekusi setelah pencahayaan selesai.

Contoh di bawah ini menunjukkan metode fadeIn() dengan parameter yang berbeda:

Contoh

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

Coba Sendiri

Metode jQuery fadeOut()

Metode jQuery fadeOut() digunakan untuk memudar keluar elemen yang terlihat.

Sintaks:

$(selector.fadeOut(speed,callback);

Parameter speed menentukan lama efek. Ini dapat diambil nilai berikut: "slow", "fast", atau milidetik.

Parameter callback Parameter adalah nama fungsi yang dieksekusi setelah pencahayaan selesai.

Contoh di bawah ini menunjukkan metode fadeOut() dengan parameter yang berbeda:

Contoh

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

Coba Sendiri

Metode jQuery fadeToggle()

Metode jQuery fadeToggle() dapat berubah antara fadeIn() dan fadeOut().

Jika elemen sudah tergelap, fadeToggle() akan menambah efek pencahayaan ke elemen.

Jika elemen sudah tercahaya, fadeToggle() akan menambah efek pencahayaan ke elemen.

Sintaks:

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

Parameter speed menentukan lama efek. Ini dapat diambil nilai berikut: "slow", "fast", atau milidetik.

Parameter callback Parameter adalah nama fungsi yang dieksekusi setelah pencahayaan selesai.

Contoh di bawah ini menunjukkan metode fadeToggle() dengan parameter yang berbeda:

Contoh

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

Coba Sendiri

Metode jQuery fadeTo()

Metode jQuery fadeTo() memungkinkan transisi ke kecerahan yang diberikan (nilai antara 0 dan 1).

Sintaks:

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

Parameter speed yang diperlukan menentukan lama efek. Ini dapat diambil nilai berikut: "slow", "fast", atau milidetik.

Parameter opacity yang diperlukan dalam metode fadeTo() mengatur efek pencahayaan dengan kecerahan yang diberikan (nilai antara 0 dan 1).

Parameter callback adalah nama fungsi yang dieksekusi setelah fungsi selesai.

Contoh di bawah ini menunjukkan metode fadeTo() dengan parameter yang berbeda:

Contoh

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

Coba Sendiri

Panduan Efect jQuery

Untuk meninjau efek jQuery secara lengkap, silakan kunjungi Panduan Efect jQuery。