fungsi animasi gelongsor jQuery
Kesan fungsi animasi asas ialah fungsi yang menggabungkan kecerunan gelongsor dan ketelusan jQuery juga menyediakan fungsi berkaitan yang hanya mempunyai kesan gelongsor.
Fungsi animasi gelongsor Gelongsor
.
Penjelasan
slideDown ialah versi kesan gelongsor bagi persembahan, slideUp ialah versi kesan gelongsor bagi hide dan slideToggle ialah versi kesan gelongsor bagi togol.
Parameter Tepat sama:
$("#divPop").slideDown(200);
$("#divPop").slideUp("fast");
$("#divPop").slideToggle("slow");rrreekaedah jQuery slideDown()
Kaedah jQuery slideDown() digunakan untuk meluncurkan elemen turun.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").unbind().click(function(){
$("#first").hide();
$("#sec").css("left","-200px").animate({"left":"0px"},500).show();
});
$("#btn2").unbind().click(function(){
$("#sec").hide();
$("#first").css("left","200px").animate({"left":"0px"},500).show();
});
$("#btn3").unbind().click(function(){
$("#first").hide();
$("#sec").css("top","200px").animate({"top":"0px"},500).show();
});
$("#btn4").unbind().click(function(){
$("#sec").hide();
$("#first").css("top","-200px").animate({"top":"0px"},500).show();
});
});
</script>
</head>
<body>
<div style="width:200px; height:200px;">
<div id="first" style="text-align:center; width:200px; height:200px;position:absolute;">
<p>第一頁</p>
<p>第一頁</p>
<p>第一頁</p>
<p>第一頁</p>
<p>第一頁</p>
</div>
<div id="sec" style="text-align:center; width:200px; height:200px; display:none;position:absolute;">
<p>第二頁</p>
<p>第二頁</p>
<p>第二頁</p>
<p>第二頁</p>
<p>第二頁</p>
</div>
</div>
<div style="width:200px; height:50px;">
<input type="button" value="向右滾動" id="btn"/>
<input type="button" value="向左滾動" id="btn2"/>
<input type="button" value="向上滾動" id="btn3"/>
<input type="button" value="向下滾動" id="btn4"/>
</div>
</body>
</html>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 slaid selesai.
Contoh berikut menunjukkan kaedah slideDown():
<!DOCTYPE html>
<html>
<head>
<skrip src= "http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document) .sedia(fungsi(){
?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????; > });
?????????????????????????????????????????????????????????????????? > padding:5px;
text-align:center;
latar belakang: #1d87ee;
border:solid 1px #c3c3c3 ;
}
div.panel
{
tinggi :120px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? paparan:tiada<T<p> tapak web teknologi Cina
;
<p>Di tapak web PHP Cina, anda boleh menemui semua tutorial pembinaan tapak web yang anda perlukan. </p>
</div>
<p class="flip">Sila klik di sini</p>
</body>
</html>
kaedah jQuery slideUp()
Kaedah jQuery slideUp() digunakan untuk meluncur elemen ke atas.
語法：$(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 slaid selesai.
Contoh berikut menunjukkan kaedah slideUp():
<!DOCTYPE html>
語法：$(selector).slideUp(speed,callback);
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.
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background: #5177ee;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
<body>
<div class="panel">
<p>php中文網 - 領先的 Web 技術教程站點</p>
<p>在php中文網，你可以找到你所需要的所有網站建設教程。</p>
</div>
<p class="flip">請點擊這里</p>
</body>
</html>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 slaid selesai.
Contoh berikut menunjukkan kaedah slideToggle():
$(selector).slideToggle(speed,callback);
