jQuery 效果 - 滑动

最新推荐文章于 2024-04-01 01:16:06 发布

依然那么楞

最新推荐文章于 2024-04-01 01:16:06 发布

阅读量866

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 滑动窗口 slideDown slideUp slideToggle

本文链接：https://blog.youkuaiyun.com/ling811/article/details/17354577

本文详细介绍了jQuery中用于实现元素滑动效果的slideDown(), slideUp()和slideToggle()方法，包括其语法、参数以及实际应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

实例

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

实例

<!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" />
<script src="jquery.js"></script>
<style>
	.panel, .flip{
		margin:0px;
		padding:5px;
		text-align:center;
		background:#e5eecc;
		border:#CCC 1px solid;
	}
	.panel{display:none}
</style>
</head>

<body>
<p class="flip">点这里</p>
<div class="panel">
	<h3>标题</h3> 
	<p>内容内容</p>
</div>
<script>
	$(document).ready(function(){
		$(".flip").click(function(){
			$(".panel").slideDown("slow");
		})
	})
</script>
</body>
</html>

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

实例

<!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" />
<script src="jquery.js"></script>
<style>
	.panel, .flip{
		margin:0px;
		padding:5px;
		text-align:center;
		background:#e5eecc;
		border:#CCC 1px solid;
	}
/*.panel{display:none}*/
.panel{ height:120px;}
</style>
</head>

<body>

<p class="flip">点这里</p>
<div class="panel">
	<h3>标题</h3> 
	<p>内容内容</p>
</div>
<script>
	$(document).ready(function(){
		$(".flip").click(function(){
			$(".panel").slideUp("slow");
		})
	})
</script>
</body>
</html>

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

实例

<!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" />
<script src="jquery.js"></script>
<style>
	.panel, .flip{
		margin:0px;
		padding:5px;
		text-align:center;
		background:#e5eecc;
		border:#CCC 1px solid;
		 width:200px;
	}
/*.panel{display:none}*//*展示的 slideDown*/
/*.panel{ height:120px;}*//*隐藏的 slideUp*/
.panel{ height:120px; display:none;}/*slideToggle*/
</style>
</head>

<body>

<p class="flip">点这里</p>
<div class="panel">
	<h3>标题</h3> 
	<p>内容内容</p>
</div>
<script>
	$(document).ready(function(){
		$(".flip").click(function(){
			$(".panel").slideToggle("slow");
		})
	})
</script>
</body>
</html>