Home » Jquery » Efek jQuery : Efek Fade – Kode dan Contohnya

Efek jQuery : Efek Fade – Kode dan Contohnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

jQuery dapat memudarkan elemen masuk dan keluar dari visibilitas.

Metode Pemudaran jQuery

Dengan jQuery kita bisa memudarkan elemen masuk dan keluar dari visibilitas

jQuery memiliki metode fade berikut:

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

Metode jQuery fadeIn ()

Metode jQuery fadeIn() digunakan untuk memudarkan elemen tersembunyi.

Sintaks:

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

Parameter kecepatan opsional menentukan durasi efek. Hal ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah fading selesai.

Contoh berikut menunjukkan metode fadeIn() dengan parameter berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p> Demonstrate fadeIn () dengan parameter berbeda. </p>

<button> Klik untuk menampilkan kotak (fadeIn) </button> <br> <br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

Metode jQuery fadeOut()

Metode jQuery fadeOut() digunakan untuk memudarkan elemen yang terlihat.

Sintaks:

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

Parameter kecepatan opsional menentukan durasi efek. Hal ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah fading selesai.

Contoh berikut menunjukkan metode fadeOut() dengan parameter berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>

<p> Peragakan fadeOut () dengan parameter berbeda. </p>

<button> Klik untuk menghilangkan kotak (fadeOut) </button> <br> <br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

Metode jQuery fadeToggle ()

Metode jQuery fadeToggle() beralih antara metode fadeIn() dan fadeOut().

Jika elemen memudar, fadeToggle() akan memudarkannya.

Jika elemen dipudarkan, fadeToggle() akan memudarkannya.

Sintaksis:

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

Parameter kecepatan opsional menentukan durasi efek. Ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah fading selesai.

Contoh berikut menunjukkan metode fadeToggle() dengan parameter berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<p> Peragakan fadeToggle () dengan parameter kecepatan berbeda. </p>

<button> Klik untuk memudarkan kotak masuk / keluar (fadeOut/fadeIn) </button> <br> <br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

Metode jQuery fadeTo()

Metode jQuery fadeTo() memungkinkan pemudaran ke opasitas tertentu (nilai antara 0 dan 1).

Sintaksis:

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

Parameter kecepatan yang diperlukan menentukan durasi efek. Ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter opasitas yang diperlukan dalam metode fadeTo() menentukan pemudaran ke opasitas tertentu (nilai antara 0 dan 1).

Parameter callback opsional adalah fungsi yang akan dijalankan setelah fungsi selesai.

Contoh berikut menunjukkan metode fadeTo() dengan parameter berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
  });
});
</script>
</head>
<body>

<p> Demonstrate fadeTo() dengan parameter berbeda. </p>

<button> Klik untuk memudarkan kotak(fadeTo) </button> <br> <br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

You may also like