Web开发基础_JQuery学习_0008_jQuery动画

最新推荐文章于 2025-10-20 18:11:32 发布

原创最新推荐文章于 2025-10-20 18:11:32 发布 · 248 阅读

1 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文通过一个jQuery动画案例展示了如何使用jQuery实现元素的显示、隐藏及移动等动画效果。具体包括使用fadeIn和fadeOut方法来改变元素的透明度，以及利用animate方法实现元素的位置变化。

jQuery动画

案例思路：

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画</title>
		<style type="text/css">
			img {
				/*动画基于定位*/
				position:relative;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			function show(){
				$("img").fadeIn(3000,function(){//使用淡入效果来显示一个隐藏的 元素
					alert("已显示");
				});
			}
			
			function hide(){
				$("img").fadeOut(3000,function(){
					alert("已隐藏");
				});
			}
			
			function del(){
				$("p[style]").fadeIn(1000).fadeOut(3000);
			}
			
			function go(){
				//参数1:偏移量（直接量/json对象）
				//参数2：时间
				//参数3：回调函数
				$("img").animate(
					{"left":"300px"},2000)
					.animate({"top":"300px"},2000)
					.animate({"left":"0"},2000)
					.animate({"top":"0"},2000,function(){
						alert("ok");
					});		
				
			}
		
		</script>
	</head>
	<body>	
		<p>
		   	<input type="button" value="显示"
		   		onclick="show();">
			<input type="button" value="隐藏"
				onclick="hide();">
			<input type="button" value="删除"
				onclick="del();">
			<input type="button" value="走起"
			 	onclick="go();">
		</p>
		<p>
			<img alt="" src="../images/01.jpg">
		</p>
		
		<p style="display:none;">操作成功</p>
	</body>
</html>

最终页面显示效果：点击对应按钮触发对应事件