jQuery简介（十一）

jQuery简介（十一）

自定义动画

有些复杂的动画是通过使用前面几个方法所不能实现的，这时后就需要使用animate（）方法了。而且使用animate（）方法也可以实现前面几个方法所能实现的效果，显而易见，animate（）方法更加具有灵活了。

利用这个方法可以自己选择1.(properties)修改的属性，2.[duration]执行时间，3.[easing]执行函数，4.[complete]执行完成回调后执行的函数

.animate(properties,[duration],[easing],[complete])

1. 修改的属性：可以是一个或多个css属性的键值对所构成的object对象。要注意所有用于动画的属性必须是数字的。以下的属性如果不是数字的将不能使用基本的jQuery功能：border,margin,padding,width,height,font,left,top,right,bottom,wordSpacing等等。
2. 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3. 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"
4. 在动画完成时执行的函数，这个可以保证当前动画完成后才会触发。

注意CSS样式使用DOM名称（font Size）来设置，而非用CSS名称（font-size）不过加上双引号（“font-size”）也可以设置。

实现内容

在2000毫秒内实现效果

点击按钮后实现改变宽，高，透明度，外上边距的效果。

除了自定义数值，每个属性能使用‘show’,‘hide’,和‘toggle’。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。

点击按钮后改变高度，透明度，外上边距和字体大小后隐藏宽度随后隐藏内容。

再次点击后显示内容

执行效果

如果提供一个以+=或-=开始的值，那么目标值就是以这个属性的当前值加上或者减去的定的数字来计算的

.animate({

     Width:’+=100px’  

}, "slow");//设置代码运行的速度或时间。

如上在代码实现效果后会在原先的宽度上再加上100px。