学习笔记——jQuery自定义动画

最新推荐文章于 2025-08-01 17:25:35 发布

原创最新推荐文章于 2025-08-01 17:25:35 发布 · 986 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

主要使用jQuery定义的animate（）方法

animate()方法包含4个参数：【只有第一个参数是必须的】

第一个参数：是一组包含作为动画属性和终值的样式属性和以及其值的集合

这个集合中每个属性都表示一个可以变化的样式属性，如height、top、opacity等【注意在这里属性只能采用fontSize形式，不能用font-size形式】

属性值可以是jQuery的hide、show、toggle等特定的动画样式字符串

示例：

{
height:"1632px",
width:"1224px",
height:"toggle",
}

第二个参数：表示动画持续的时间，以毫秒为单位，也可以用预定义字符串如：slow、normal、fast等

第三个参数：表示要使用的擦除效果的名称，若要使用该参数，则需要插件支持。默认jQuery提供linear、和swing特效

第四个参数：表示回调函数，即动画完毕后将要调用的函数

实例：

<html>
	<head>
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$("input").click(function(){
					$("img").animate({
						height:"1632px",
						width:"1224px",
						height:"toggle",
						opacity:"toggle"
					},1000);
				})
			})
		</script>
	</head>
	<body>
		<input type="button" value="自定义动画"/>
		<div>
			<img src="E:\FilesSaved\人物照\处理照片\IMG_20130405_132951.jpg" height="600" width="400"/>
		</div>
	</body>
</html>

animate() 功能强大，可以将第二个以及后面的所有参数都放置在一个对象中，在这个集合对象中包含动画选项的值，然后将这个对象作为参数传递给animate（）

该对象可以包含下面选项：

duration：指定动画演示时间。单位为毫秒。也可以使用slow、normal、fast等

easing：该选项接受要使用的擦除效果名称，需要插件支持，默认值为swing

complete：指定该动画完成时执行的函数

step：动画演示之后回调值

queue：该选项表示是否使此动画进入动画队列，默认值为true

示例：

<html>
	<head>
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
			$("input").click(function(){
				$("div").animate(
					{height:"100%"},
					{duration:5000,queue:false;}
				).animate(
					{fontSize:"10em"},
					1000
				).animate(
					{opacity:0},
					2000
				);
			})
		</script>
	</head>
	<body>
		<input type="button" value="自定义动画"/>
		<div>测试自定义动画</div>
	</body>
</html>