005_滑动效果

最新推荐文章于 2025-08-28 18:39:31 发布

原创最新推荐文章于 2025-08-28 18:39:31 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #javascript

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. jQuery滑动方法

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

1.2. jQuery拥有以下滑动方法: slideDown()、slideUp()和slideToggle()。

2. slideDown()方法

2.1. slideDown()方法通过使用滑动效果, 显示隐藏的被选元素。

2.2. 语法:

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

2.3. 参数

2.4. 如果元素已经是完全可见, 则该效果不产生任何变化, 除非规定callback函数。

2.5. 该效果适用于通过jQuery隐藏的元素, 或在CSS中声明display:none的元素(但不适用于visibility:hidden的元素)。

3. slideUp()方法

3.1. 通过使用滑动效果, 隐藏被选元素, 如果元素已显示出来的话。

3.2. 语法:

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

3.3. 参数

3.4. 如果元素已经隐藏, 则该效果不产生任何变化, 除非规定了callback函数。

4. slideToggle()方法

4.1. slideToggle()方法通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的, 则隐藏这些元素, 如果被选元素是隐藏的, 则显示这些元素。

4.2. 语法:

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

4.3. 参数

5. 例子

5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery滑动效果</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("p").slideUp('fast');
				});
				$('#btn2').click(function(){
					$("p").slideDown('fast');
				});
				$('#btn3').click(function(){
					$("p").slideToggle('fast');
				});
				$('#btn4').click(function(){
					$("p").slideUp('slow');
				});
				$('#btn5').click(function(){
					$("p").slideDown('slow');
				});
				$('#btn6').click(function(){
					$("p").slideToggle('slow');
				});
				$('#btn7').click(function(){
					$("p").slideUp('normal');
				});
				$('#btn8').click(function(){
					$("p").slideDown('normal');
				});
				$('#btn9').click(function(){
					$("p").slideToggle('normal');
				});
				$('#btn10').click(function(){
					$("p").slideUp(2000);
				});
				$('#btn11').click(function(){
					$("p").slideDown(2000);
				});
				$('#btn12').click(function(){
					$("p").slideToggle(2000);
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">fast向上滑动段落</button> <button id="btn2">fast向下滑动段落</button> <button id="btn3">fast向上滑动/向下滑动段落</button><br /><br />
		<button id="btn4">slow向上滑动段落</button> <button id="btn5">slow向下滑动段落</button> <button id="btn6">slow向上滑动/向下滑动段落</button><br /><br />
		<button id="btn7">normal向上滑动段落</button> <button id="btn8">normal向下滑动段落</button> <button id="btn9">normal向上滑动/向下滑动段落</button><br /><br />
		<button id="btn10">2s向上滑动段落</button> <button id="btn11">2s向下滑动段落</button> <button id="btn12">2s向上滑动/向下滑动段落</button>
		<p style="width: 300px; height: 300px; background: red;">jQuery向上滑动和向下滑动</p>
	</body>
</html>

5.2. 效果图