jQuery（五）——jQuery动画效果

最新推荐文章于 2021-09-12 19:30:45 发布

原创最新推荐文章于 2021-09-12 19:30:45 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery动画效果

● 富客户端技术同时被 2 个专栏收录

9 篇文章

订阅专栏

------【jQuery】

6 篇文章

订阅专栏

本文详细介绍使用jQuery进行DOM元素的显示与隐藏、淡入淡出、滑动、动画效果控制，包括回调方法及动画暂停等高级应用。

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

目录

1. jQuery显示与隐藏DOM；

2. jQuery淡入和淡出DOM；

3. jQuery滑动DOM；

4. jQuery动画；

5. jQuery callBack回调方法；

6. jQuery暂停动画；

1. jQuery显示与隐藏DOM；

<script type="text/javascript">
	$(document).ready(function(){
		//显示DOM
		$("#b1").click(function(){
			$("#p").show();
		});
		//隐藏DOM
		$("#b2").click(function(){
			$("#p").hide();
		});
	});
</script>

<body>
<input type="button" id="b1" value="显示"/>
<input type="button" id="b2" value="隐藏"/>
<p id="p">手里剑</p>
</body>

2. jQuery淡入和淡出DOM；

<script type="text/javascript">
	$(document).ready(function(){
		//淡出DOM
		$("#b1").click(function(){
			$("#p").fadeOut();
		});
		//淡入DOM
		$("#b2").click(function(){
			$("#p").fadeIn();
		});
	});
</script>

<body>
<input type="button" id="b1" value="淡出"/>
<input type="button" id="b2" value="淡入"/>
<div id="p" style="width:100px; height:100px; background-color:red; margin:10px;"></div>
</body>

运行效果

当然还有一种可以切换淡入淡出的方法；

其中，fadeToggle可以设置参数，快慢都可以，还可以设置淡入淡出的时间，功能非常强大！

<script type="text/javascript">
	$(document).ready(function(){
		//淡入淡出切换DOM
		$("#b3").click(function(){
			//$("#p").fadeToggle();
			//$("#p").fadeToggle("fast");//设置淡入淡出的时间为快一些
			$("#p").fadeToggle(5000);//设置时间为5s
		});
	});
</script>

这里设置的时间为5秒！

还可以设置DOM的透明度；

fadeTo也可以设置参数，快慢都行；还有透明度的取值范围是0~1；

<script type="text/javascript">
	$(document).ready(function(){
		//设置DOM透明度
		$("#b").click(function(){
			$("#p1").fadeTo("slow",0.1);//透明度取值范围是0~1
			$("#p2").fadeTo("slow",0.5);
			$("#p3").fadeTo("slow",0.8);
		});
	});
</script>

<body>
<input type="button" id="b" value="透明度"/>
<div id="p1" style="width:100px; height:100px; background-color:red; margin:10px;"></div>
<div id="p2" style="width:100px; height:100px; background-color:black; margin:10px;"></div>
<div id="p3" style="width:100px; height:100px; background-color:yellow; margin:10px;"></div>
</body>

有3中不同的透明度显示：

3. jQuery滑动DOM；

<script type="text/javascript">
	$(document).ready(function(){
		//设置DOM向下滑动
		$("#b1").click(function(){
			$("#p").slideDown("slow");
		})
		//设置DOM向上滑动
		$("#b2").click(function(){
			$("#p").slideUp("slow");
		})
	});
</script>

<body>
<input type="button" id="b1" value="向下滑动"/>
<input type="button" id="b2" value="向上滑动"/>
<div id="p" style="width:500px; height:100px; background-color:red; display:none;">
	<p>手里剑</p>
	<p>影刃</p>
</div>
</body>

4. jQuery动画；

设置DOM结点向右移动；

<script type="text/javascript">
	$(document).ready(function(){
		//DOM向右移动
		$("#b").click(function(){
			$("#p").animate({left:'200px'},'slow');
		})
	});
</script>

<body>
<input type="button" id="b" value="向左移动"/>
<div id="p" style="width:100px; height:100px; background-color:red; margin:10px; position:absolute;"></div>
</body>

来看看动画效果向右移动；

<script type="text/javascript">
	$(document).ready(function(){
		//动画效果向右移动
		$("#b").click(function(){
			$("#p").animate({
				left:'200px',
				opacity:0.5,
				height:'150px',
				width:'150px'
				},'slow');
		});
	});
</script>

<body>
<input type="button" id="b" value="动画效果向右移动"/>
<div id="p" style="width:100px; height:100px; background-color:red; margin:10px; position:absolute;"></div>
</body>

5. jQuery callBack回调方法；

<script type="text/javascript">
	$(document).ready(function(){
		$("#b").click(function(){
			$("#p").show(function(){
				alert("动画出来了！");
			});
		});
	});
</script>

<body>
<input type="button" id="b" value="回调事件"/>
<p id="p" style="display:none">动画</p>
</body>

6. jQuery暂停动画；

<script type="text/javascript">
	$(document).ready(function(){
		/* 向右移动 */
		$("#b1").click(function(){
			$("#p").animate({left:'500px'},'slow');
		});
		/* 暂停移动 */
		$("#b2").click(function(){
			$("#p").stop();
		});
	});
</script>

<body>
<input type="button"  id="b1" value="向右移动"/>
<input type="button"  id="b2" value="停止"/>
<div id="p" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div>
</body>