jQuery效果 - 动画

最新推荐文章于 2025-06-25 11:07:19 发布

AllenWalker1936

最新推荐文章于 2025-06-25 11:07:19 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery jQuery效果

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

jQuery 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery效果

7 篇文章

订阅专栏

本文介绍使用jQuery实现元素动画的方法，包括宽度、高度及透明度变化等。通过示例代码展示了如何逐步改变元素的尺寸和字体大小。

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

jQuery效果 - 动画

方法

animate()

语法

$(selector).animate({params},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(){
			$("#start").click(function(){
				var donghua=$("#div");
				donghua.animate({width:'500px',opacity:'0.3'},"slow");
				donghua.animate({height:'500px',opacity:'0.5'},"slow");
				donghua.animate({width:'100px',opacity:'0.7'},"slow");
				donghua.animate({height:'100px',opacity:'1'},"slow");
			});
			$("#start").click(function(){
				var donghua1=$("p");
				donghua1.animate({fontSize:'+=1em'},"slow");
			});
		});
	</script>
 </head>
 <body>
	<input type="button" id="start" value="开始" "">
	<div id="div" class="" style="background:#66ccff;width:100px;height:100px;position:absolute;">
		<p>hello world!</p>
	</div>
 </body>
</html>