Efek jQuery : Efek Fade – Kode dan Contohnya

jQuery dapat memudarkan komponen masuk ke dan meninggalkan berasal dari visibilitas.

Metode Pemudaran jQuery

Dengan jQuery kita mungkin memudarkan komponen masuk ke dan meninggalkan berasal dari visibilitas

jQuery {memiliki} pendekatan fade berikut:

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

Metode jQuery fadeIn ()

Metode jQuery fadeIn() digunakan untuk memudarkan komponen {tersembunyi}.

Sintaks:

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

Parameter menilai opsional menentukan durasi dampak. Hal ini dapat mengambil nilai pasar berikut: “lamban”, “segera”, atau bahkan milidetik.

Parameter callback opsional adalah Kegunaan yang pasti akan dijalankan setelah fading penampilan.

Contoh berikut menunjukkan pendekatan fadeIn() bersama parameter dengan cara yang berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(doc).prepared(operate(){
  $("button").click on(operate(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("gradual");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<physique>

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

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

<div id="div1" fashion="width:80px;top:80px;show:none;background-shade:crimson;"></div><br>
<div id="div2" fashion="width:80px;top:80px;show:none;background-shade:inexperienced;"></div><br>
<div id="div3" fashion="width:80px;top:80px;show:none;background-shade:blue;"></div>

</physique>
</html>

Metode jQuery fadeOut()

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

Sintaks:

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

Parameter menilai opsional menentukan durasi dampak. Hal ini dapat mengambil nilai pasar berikut: “lamban”, “segera”, atau bahkan milidetik.

Parameter callback opsional adalah Kegunaan yang pasti akan dijalankan setelah fading penampilan.

Contoh berikut menunjukkan pendekatan fadeOut() bersama parameter dengan cara yang berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(doc).prepared(operate(){
  $("button").click on(operate(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("gradual");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<physique>

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

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

<div id="div1" fashion="width:80px;top:80px;background-shade:crimson;"></div><br>
<div id="div2" fashion="width:80px;top:80px;background-shade:inexperienced;"></div><br>
<div id="div3" fashion="width:80px;top:80px;background-shade:blue;"></div>

</physique>
</html>

Metode jQuery fadeToggle ()

Metode jQuery fadeToggle() tombol diantara pendekatan fadeIn() dan fadeOut().

Jika komponen menghitamkan, fadeToggle() pasti akan memudarkannya.

Lihat lebih banyak:  4 Cara Mengetahui Bug Operator Wajib Dicoba

Jika komponen dipudarkan, fadeToggle() pasti akan memudarkannya.

Sintaksis:

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

Parameter menilai opsional menentukan durasi dampak. Ini dapat mengambil nilai pasar berikut: “lamban”, “segera”, atau bahkan milidetik.

Parameter callback opsional adalah Kegunaan yang pasti akan dijalankan setelah fading penampilan.

Contoh berikut menunjukkan pendekatan fadeToggle() bersama parameter dengan cara yang berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(doc).prepared(operate(){
  $("button").click on(operate(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("gradual");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<physique>

<p> Peragakan fadeToggle () bersama parameter menilai dengan cara yang berbeda. </p>

<button> Klik untuk memudarkan karton masuk ke / meninggalkan (fadeOut/fadeIn) </button> <br> <br>

<div id="div1" fashion="width:80px;top:80px;background-shade:crimson;"></div>
<br>
<div id="div2" fashion="width:80px;top:80px;background-shade:inexperienced;"></div>
<br>
<div id="div3" fashion="width:80px;top:80px;background-shade:blue;"></div>

</physique>
</html>

Metode jQuery fadeTo()

Metode jQuery fadeTo() memungkinkan pemudaran ke dalam opasitas tertentu (nilai pasar diantara 0 dan 1).

Sintaksis:

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

Parameter menilai yang menuntut menentukan durasi dampak. Ini dapat mengambil nilai pasar berikut: “lamban”, “segera”, atau bahkan milidetik.

Parameter opasitas yang menuntut berat pendekatan fadeTo() menentukan pemudaran ke dalam opasitas tertentu (nilai pasar diantara 0 dan 1).

Parameter callback opsional adalah Kegunaan yang pasti akan dijalankan setelah Kegunaan penampilan.

Contoh berikut menunjukkan pendekatan fadeTo() bersama parameter dengan cara yang berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(doc).prepared(operate(){
  $("button").click on(operate(){
    $("#div1").fadeTo("gradual", 0.15);
    $("#div2").fadeTo("gradual", 0.4);
    $("#div3").fadeTo("gradual", 0.7);
  });
});
</script>
</head>
<physique>

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

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

<div id="div1" fashion="width:80px;top:80px;background-shade:crimson;"></div><br>
<div id="div2" fashion="width:80px;top:80px;background-shade:inexperienced;"></div><br>
<div id="div3" fashion="width:80px;top:80px;background-shade:blue;"></div>

</physique>
</html>

Anda ringan menonton: Efek jQuery : Efek Fade – Kode dan Contohnya

Sumber: https://taylorswift10years.com

Kategori: Teknologi

Leave a Reply