jQuery memudar dan memudar


Kesan jQuery - Pudar

Dengan jQuery, anda boleh mencapai kesan pudar unsur.

Oleh kerana masa sangat berharga, kami menyediakan kaedah pembelajaran yang cepat dan mudah.

Dalam tutorial pemula, anda boleh mempelajari pengetahuan yang diperlukan.

Contoh

jQuery fadeIn()
Menunjukkan kaedah jQuery fadeIn().

jQuery fadeOut()
Menunjukkan kaedah jQuery fadeOut().

jQuery fadeToggle()
Menunjukkan kaedah jQuery fadeToggle().

jQuery fadeTo()
Menunjukkan kaedah jQuery fadeTo() .

Kaedah Pudar jQuery

Dengan jQuery, anda boleh mencapai kesan elemen pudar.

jQuery mempunyai empat kaedah pudar berikut:

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

kaedah jQuery fadeIn()

jQuery fadeIn() digunakan untuk pudar dalam elemen tersembunyi.

Sintaks:

$(pemilih).fadeIn(kelajuan,panggil balik);

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat. .

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.

Contoh berikut menunjukkan kaedah fadeIn() dengan parameter berbeza:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</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>

Run instance »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

kaedah jQuery fadeOut()

kaedah jQuery fadeOut() digunakan Pudarkan elemen yang kelihatan.

Sintaks:

$(pemilih).fadeOut(kelajuan,panggil balik);

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.

Contoh berikut menunjukkan kaedah fadeOut() dengan parameter berbeza:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</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>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

kaedah jQuery fadeToggle()

kaedah jQuery fadeToggle() boleh bertukar antara kaedah fadeIn() dan fadeOut().

fadeToggle() menambah kesan fade-in pada elemen jika ia sudah pudar.

fadeToggle() menambah kesan fade out pada elemen jika ia sudah pudar masuk.

Sintaks:

$(pemilih).fadeToggle(kelajuan,panggil balik);

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.

Contoh berikut menunjukkan kaedah fadeToggle() dengan parameter berbeza:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</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>

Run Instance»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

kaedah jQuery fadeTo()

kaedah jQuery fadeTo() membenarkan kecerunan bertukar kepada nilai yang diberikan Ketelusan (nilai antara 0 dan 1).

Sintaks:

$(pemilih).fadeTo(kelajuan, kelegapan, panggil balik);

Parameter kelajuan yang diperlukan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter kelegapan yang diperlukan dalam kaedah fadeTo() menetapkan kesan pudar kepada kelegapan yang diberikan (nilai antara 0 dan 1).

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas fungsi selesai.

Contoh berikut menunjukkan kaedah fadeTo() dengan parameter berbeza:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/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>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</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>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian