Kaedah gelongsor jQuery boleh membuat elemen meluncur ke atas dan ke bawah.
Kaedah Gelongsor jQuery
Dengan jQuery anda boleh mencipta kesan gelongsor pada elemen.
jQuery mempunyai kaedah gelongsor berikut:
slideDown()
slideUp()
slideToggle()
kaedah jQuery slideDown()
jQuery kaedah slideDown () digunakan untuk meluncurkan elemen ke bawah.
Sintaks:
$(selector).slideDown(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 gelongsor selesai.
Contoh berikut menunjukkan kaedah slideDown() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideDown("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我滑下面板</div>
<div id="div2">你好啊，美女/帅哥</div>
</body>
</html>Jalankan dan cuba
kaedah jQuery slideUp()
kaedah jQuery slideUp() digunakan untuk meluncur elemen ke atas.
Sintaks:
$(selector).slideUp(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 gelongsor selesai.
Contoh berikut menunjukkan kaedah slideUp():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideUp("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
}
</style>
</head>
<body>
<div id="div1">点我拉起面板</div>
<div id="div2">Hello world!</div>
</body>
</html>Jalankan dan cuba
kaedah jQuery slideToggle()
kaedah jQuery slideToggle() boleh bertukar antara kaedah slideDown() dan slideUp().
Jika elemen meluncur ke bawah, slideToggle() meluncurkannya ke atas.
Jika elemen meluncur ke atas, slideToggle() meluncurkannya ke bawah.
Sintaks
$(selector).slideToggle(speed,callback);
Ya Parameter kelajuan yang dipilih menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.
Contoh berikut menunjukkan kaedah slideToggle():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideToggle("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我，显示或隐藏面板。</div>
<div id="div2">如果只是相遇，而不能相守，人生最好不相见</div>
</body>
</html>Jalankan dan cuba
bahagian seterusnya