slaid jQuery


Kesan jQuery - Gelongsor

Kaedah gelongsor jQuery boleh membuat elemen gelongsor ke atas dan ke bawah.

Masa bernilai wang, jadi kami menyediakan anda kandungan pembelajaran yang pantas dan mudah difahami.

Di sini, anda boleh mendapatkan sebarang pengetahuan yang anda perlukan melalui mod yang mudah difahami dan mudah.

Contoh

jQuery slideDown()
Menunjukkan kaedah jQuery slideDown().

jQuery slideUp()
Menunjukkan kaedah jQuery slideUp().

jQuery slideToggle()
Menunjukkan kaedah jQuery slideToggle().

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:

$(pemilih).slideDown(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 gelongsor selesai.

Contoh berikut menunjukkan kaedah slideDown():

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(){
  $("#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">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

kaedah jQuery slideUp()

kaedah jQuery slideUp() digunakan untuk meluncur elemen ke atas.

Sintaks:

$(pemilih).slideUp(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 gelongsor selesai.

Contoh berikut menunjukkan kaedah slideUp():

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(){
  $("#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">点我拉起面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

kaedah jQuery slideToggle()

kaedah jQuery slideToggle() boleh berada di antara slideDown() dan slideUp () kaedah Buat suis.

Jika elemen meluncur ke bawah, slideToggle() meluncurkannya ke atas.

Jika elemen meluncur ke atas, slideToggle() meluncurkannya ke bawah.

$(pemilih).slideTogol(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 gelongsor selesai.

Contoh berikut menunjukkan kaedah slideToggle():

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(){
  $("#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>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian