Kesan jQuery - Slaid
kaedah gelongsor jQuery
Dengan jQuery, anda boleh mencipta kesan gelongsor pada elemen.
jQuery mempunyai kaedah gelongsor berikut:
slideDown()
slideUp()
slideToggle()
kaedah jQuery slideDown()
kaedah jQuery slideDown() digunakan untuk meluncur 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.
<!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(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">點(diǎn)我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>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.
<!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(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">點(diǎn)我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>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.
$(selector).slideToggle(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.
<!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(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>
