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

待我称王封你为后i 2022-02-09 12:43 287阅读 0赞

主要使用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>