jQuery效果 - 滑动

最新推荐文章于 2025-06-25 11:04:47 发布

AllenWalker1936

最新推荐文章于 2025-06-25 11:04:47 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery jQuery效果

本文链接：https://blog.youkuaiyun.com/AllenWalker1936/article/details/88871844

jQuery 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery效果

7 篇文章

订阅专栏

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>