jQuery fade in dan out fungsi animasi
Fungsi pudar hanya memberikan kesan kecerunan ketelusan.
Fungsi pudar Pudar
| Perihalan< ??> | Contoh | ||||||||||||
| fadeIn( kelajuan, [panggilan balik] ) | Pudar dalam semua elemen padanan melalui perubahan kelegapan dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai. Animasi ini hanya melaraskan kelegapan elemen, yang bermaksud ketinggian dan lebar semua elemen padanan tidak akan berubah. | Pudarkan perenggan masuk secara perlahan selama 600 milisaat:
$("p").fadeIn("slow"); | ||||||||||||
| < ??>fadeOut( kelajuan, [panggilan balik] ) | Pudarkan semua elemen padanan melalui perubahan kelegapan dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai. | Pudarkan perenggan keluar secara perlahan menggunakan 600 milisaat:
$("p").fadeOut("slow"); | ||||||||||||
| < ??>fadeTo(kelajuan, kelegapan, [panggilan balik]) | Laraskan kelegapan semua elemen padanan secara beransur-ansur kepada kelegapan yang ditentukan dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai. | Laraskan ketelusan perenggan secara perlahan kepada 0.66 lebih 600 milisaat, kira-kira 2/3 keterlihatan:
$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); |
Penjelasan
Fungsi fadeIn dan fadeOut sepadan dengan menunjukkan dan menyembunyikan, yang digunakan untuk memaparkan dan menyembunyikan objek dengan kesan kecerunan ketelusan:
$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");1. Fade in Fade out
1 kaedah jQuery fadeIn()
jQuery fadeIn() digunakan untuk fade in. unsur tersembunyi.
語(yǔ)法：$(selector).fadeIn(speed,callback);
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:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeIn() 方法。</p>
<button>點(diǎn)擊這里，使三個(gè)矩形淡入</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>
2. Kaedah jQuery fadeOut()
Kaedah jQuery fadeOut() digunakan untuk memadamkan elemen yang boleh dilihat.
語(yǔ)法：$(selector).fadeOut(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat. Parameter panggilan balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.
Contoh berikut menunjukkan kaedah fadeOut() dengan parameter yang berbeza:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeOut() 方法。</p>
<button>點(diǎn)擊這里，使三個(gè)矩形淡出</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>
kaedah jQuery fadeToggle()
kaedah jQuery fadeToggle() boleh bertukar antara kaedah fadeIn() dan fadeOut(). Jika elemen sudah pudar, fadeToggle() menambah kesan fade-in pada elemen. Jika elemen sudah pudar masuk, fadeToggle() menambah kesan fade out pada elemen.
語(yǔ)法：$(selector).fadeToggle(speed,callback);
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:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeToggle() 方法。</p>
<button>點(diǎn)擊這里，使三個(gè)矩形淡入淡出</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>
</body>
</html>4 kaedah jQuery fadeTo()
Kaedah jQuery fadeTo() membenarkan kecerunan diberikan. Kelegapan tertentu (nilai antara 0 dan 1).
語(yǔ)法：$(selector).fadeTo(speed,opacity,callback);
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 kelegapan kepada kelegapan yang diberikan (nilai antara 0 dan 1). Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan apabila fungsi ini selesai.
Contoh berikut menunjukkan kaedah fadeTo() dengan parameter berbeza:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.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>演示帶有不同參數(shù)的 fadeTo() 方法。</p>
<button>點(diǎn)擊這里，使三個(gè)矩形淡出</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> //設(shè)置彈出層的透明度
$("#divPop").fadeTo(0, 0.66); //讓彈出層透明顯示
if ($("#divPop").css("display") == "none")
{
$("#divPop").fadeIn(speed);
} else
{
$("#divPop").fadeOut(speed);
}Selepas menetapkan ketelusan lapisan pop timbul dengan fadeTo, menggunakan fadeIn akan menyebabkan objek dipaparkan dan pudar kepada tetapan fadeTo. Ketelusan.
Apa yang diperkenalkan di sini hanyalah ciri-ciri kedua-dua fungsi dalam aplikasi sebenar, ia tidak semestinya perlu digunakan bersama.
