jQuery效果 - 滑动
方法
- slideDown()
- slideUp()
- slideToggle()
语法
$(selector).slideDown(speed,callback);//向下滑动
$(selector).slideUp(speed,callback);//向上滑动
$(selector).slideToggle(speed,callback);//切换
代码
<!doctype html>
<html>
<head>
<title>jq滑动</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div2").click(function(){
$(".panel").slideDown("slow");
});
$("#div3").click(function(){
$(".panel").slideUp("slow");
});
$("#div4").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel{
margin:0px;
padding:0px;
text-align:center;
background:#66ccff;
border:solid 1px blue;
display:none;
}
div.flip{
margin:0px;
padding:0px;
text-align:center;
background:#66ccff;
}
#div2,#div3,#div4{
border:solid 1px blue;
}
</style>
</head>
<body>
<div id="div1" class="panel">
<p>hello world!</p>
</div>
<div id="" class="flip">
<div id="div2">点我下滑</div>
<div id="div3">点我上划</div>
<div id="div4">点我切换</div>
</div>
</body>
</html>
2857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
