jQuery中上卷下拉切換slideToggle
slideDown與slideUp是一對(duì)相反的方法。需要對(duì)元素進(jìn)行上下拉卷效果的切換，jQuery提供了一個(gè)便捷方法slideToggle用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素
基本的操作：slideToggle();
這是最基本的操作，獲取元素的高度，使這個(gè)元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。
提供參數(shù)：.slideToggle( [duration ] ,[ complete ] )
同樣的提供了時(shí)間、還有動(dòng)畫結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)完成動(dòng)畫，然后出發(fā)回調(diào)函數(shù)
同時(shí)也提供了時(shí)間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)
slideToggle("fast")
slideToggle("slow")
注意：
- display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值
- 當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>slideToggle</h2>
<div class="left">
<div id="a1"></div>
<button>點(diǎn)擊slideToggle上下卷滾切換</button>
</div>
<script type="text/javascript">
$("button").click(function() {
$("#a1").slideToggle(3000)
});
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
