JQuery自定义动画animate方法

JQuery中show( ) 方法和hide( ) 方法会同时修改元素的多个样式属性，即高度、宽度和不透敏度；

fadeOut( ) 方法和fadeIn( ) 方法只会修改元素的不透明度；

slideDown( ) 方法和slideUp( ) 方法只会改变元素的高度。

很多情况下，这些方法无法满足用户的各种需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。

语法结构为：

[javascript] view plaincopy

1. animate(params, speed, callback)  

参数说明：

a、params：一个包含杨树属性及值的映射

b、speed：速度参数，可选

c、callback：在动画完成是执行的函数，可选

1、自定义简单动画

有一个空白的HTML文档，里面有一个id='panel'的<div>元素，当<div>元素被单击时，能在页面上横向飘动

先给这个<div>元素添加CSS样式

[css] view plaincopy

1. #div{  
2.   position:relative;  
3.   width:100px;  
4.   height:100px;  
5.   background-color:#CCCCCC;  
6. }  

为#panel元素创建一个单击事件，然后对元素加入animate()方法，是元素在3秒内，向右移动500像素

[javascript] view plaincopy

1. $('#panel').click(function(){  
2.   $(this).animate({left:'500px'}, 3000);  
3. });  

2、累加、累减动画

在之前的代码中，如果在500px之前加上 += 或者 -=符号，即表示在当前位置累加或者累减。

[javascript] view plaincopy

1. $(this).animate({left:'+=500px'}, 3000);  

3、多重动画

同时执行多个动画

例如元素在向右滑动的同时，放大元素的高度

[javascript] view plaincopy

1. $(this).animate({left:'500px', height:'200px'}, 3000);  

按顺序执行多个动画

只需要把代码拆开，按顺序写就可以了

[javascript] view plaincopy

1. $(this).animate({left:'500px'}, 3000);  
2. $(this).animate({height:'200px'}, 3000);  
3. // 链式写法  
4. $(this).animate({left:'500px'}, 3000)  
5.        .animate({height:'200px'}, 3000);  

4、动画回调函数

如果想要在顺序执行多个动画的最后，将元素式样CSS进行修改，此时不会成功。因为css( ) 方法并不会加入到动画行列中，而是立即执行。

此时可以使用回调函数(callback) 对非动画方法实现排队。

[javascript] view plaincopy

1. $(this).animate({left:'400px',opacity:'1'}, 3000)  
2.        .animate({top:'200px'}, 3000, function(){  
3.            $(this).css('border':'5px solid blue');  
4.        });  

* callback( )回调函数适用于JQery所有的动画效果方法。

转载于：http://blog.csdn.net/ld_____/article/details/48543051