jQuery滑動(dòng)動(dòng)畫(huà)函數(shù)
基本動(dòng)畫(huà)函數(shù)的效果是一個(gè)綜合了滑動(dòng)和透明度漸變的函數(shù), jQuery還單獨(dú)提供了只有滑動(dòng)效果的相關(guān)函數(shù).
滑動(dòng)動(dòng)畫(huà)函數(shù)? Sliding
講解
slideDown就是show的滑動(dòng)效果版本, slideUp就是hide的滑動(dòng)效果版本, slideToggle就是toggle的滑動(dòng)效果版本.
參數(shù)完全相同:
$("#divPop").slideDown(200);
$("#divPop").slideUp("fast");
$("#divPop").slideToggle("slow");<!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>無(wú)標(biāo)題文檔</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>第一頁(yè)</p>
<p>第一頁(yè)</p>
<p>第一頁(yè)</p>
<p>第一頁(yè)</p>
<p>第一頁(yè)</p>
</div>
<div id="sec" style="text-align:center; width:200px; height:200px; display:none;position:absolute;">
<p>第二頁(yè)</p>
<p>第二頁(yè)</p>
<p>第二頁(yè)</p>
<p>第二頁(yè)</p>
<p>第二頁(yè)</p>
</div>
</div>
<div style="width:200px; height:50px;">
<input type="button" value="向右滾動(dòng)" id="btn"/>
<input type="button" value="向左滾動(dòng)" id="btn2"/>
<input type="button" value="向上滾動(dòng)" id="btn3"/>
<input type="button" value="向下滾動(dòng)" id="btn4"/>
</div>
</body>
</html>jQuery slideDown() 方法
? jQuery slideDown() 方法用于向下滑動(dòng)元素。
語(yǔ)法：$(selector).slideDown(speed,callback);
? 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒?？蛇x的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideDown() 方法：
<!DOCTYPE html>
<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").slideDown("slow");
? ? ? ? ? ?});
? ? ? ?});
? ?</script>
? ?<style type="text/css">
? ? ? ?div.panel,p.flip
? ? ? ?{
? ? ? ? ? ?margin:0px;
? ? ? ? ? ?padding:5px;
? ? ? ? ? ?text-align:center;
? ? ? ? ? ?background: #1d87ee;
? ? ? ? ? ?border:solid 1px #c3c3c3;
? ? ? ?}
? ? ? ?div.panel
? ? ? ?{
? ? ? ? ? ?height:120px;
? ? ? ? ? ?display:none;
? ? ? ?}
? ?</style>
</head>
<body>
<div class="panel">
? ?<p>PHP中文網(wǎng)- 領(lǐng)先的 Web 技術(shù)教程站點(diǎn)</p>
? ?<p>在 php中文網(wǎng)，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<p class="flip">請(qǐng)點(diǎn)擊這里</p>
</body>
</html>
jQuery slideUp() 方法
? jQuery slideUp() 方法用于向上滑動(dòng)元素。
語(yǔ)法：$(selector).slideUp(speed,callback);
? 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideUp() 方法：
<!DOCTYPE html>
<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中文網(wǎng) - 領(lǐng)先的 Web 技術(shù)教程站點(diǎn)</p>
<p>在php中文網(wǎng)，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<p class="flip">請(qǐng)點(diǎn)擊這里</p>
</body>
</html>
jQuery slideToggle() 方法
? jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。如果元素向下滑動(dòng)，則 slideToggle() 可向上滑動(dòng)它們。如果元素向上滑動(dòng)，則 slideToggle() 可向下滑動(dòng)它們。
$(selector).slideToggle(speed,callback);
? 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideToggle() 方法：
<!DOCTYPE html>
<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").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>php中文網(wǎng) - 領(lǐng)先的 Web 技術(shù)教程站點(diǎn)</p>
<p>php中文網(wǎng)，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p>
</div>
<p class="flip">請(qǐng)點(diǎn)擊這里</p>
</body>
</html>
