jQuery 支持使用下面方法來(lái)實(shí)現(xiàn) HTML 元素的滑動(dòng)效果：
slideDown 方法
用來(lái)實(shí)現(xiàn)向下滑動(dòng)動(dòng)畫效果，其基本語(yǔ)法為：
$(selector).slideDown(speed,callback);可選參數(shù) speed 給出了淡入效果的時(shí)間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個(gè)可選參數(shù)為回調(diào)函數(shù)，在 slideDown()方法結(jié)束后調(diào)用。
下面例子點(diǎn)擊按鈕 #panel 將采用下滑方式顯示出來(lái)：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.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">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>slideUp 方法
用來(lái)實(shí)現(xiàn)向上滑動(dòng)動(dòng)畫效果，其基本語(yǔ)法為：
$(selector).slideUp(speed,callback);
可選參數(shù) speed 給出了淡入效果的時(shí)間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個(gè)可選參數(shù)為回調(diào)函數(shù)，在 slideUp()方法結(jié)束后調(diào)用。
$("#flip").click(function(){
$("#panel").slideUp();
});slideToggle 方法
用來(lái)實(shí)現(xiàn)交替顯示向上向下滑動(dòng)動(dòng)畫效果，如果之前是下滑顯示，slideToggle 則顯示 slideUp(),反之顯示 slideDown
其基本語(yǔ)法為：
$(selector).slideToggle(speed,callback);
可選參數(shù) speed 給出了淡入效果的時(shí)間，可以使用 “slow”,”fast” 或是數(shù)值（微秒） 第二個(gè)可選參數(shù)為回調(diào)函數(shù)，在 slideUp()方法結(jié)束后調(diào)用。
$("#flip").click(function(){
$("#panel").slideToggle();
});
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多