jQuery动画animate()方法小介绍介绍

.animate()是jQuery实现动画的一种方法,它接受一个必选参数(properties,动画所要改变的属性),和三个可选参数[, duration ] [, easing ] [, complete ] 。

  • [, duration ] 字符串或者数字决定动画将运行多久,默认: 400。
  • [, easing ]一个字符串,表示过渡使用哪种缓动函数,jQuery自身提供”linear” 和 “swing”,默认: swing
  • [, complete ] Function()在动画完成时执行的函数。

Function()函数是一个很重要的参数方法
看如下jQuery操作

1
$('div').animate({height: 0},500).hide();

div原来宽高是300px和400px,想要实现的功能是让div的高度变为0,然后再隐藏,这里采用jQuery的链式写法。但实际效果是div元素直接消失,也就是直接hide().原因是height的变化有一个持续500毫秒的时间,在这个动画执行时就已经执行.hide()隐藏。所以看不到效果。

要想看到效果就必须把hide()放到动画完成后,所以可以这样改写:

1
2
3
$('div').animate({height: 0},500,function(){
$('div').hide();
});

这样隐藏操作就会在动画完成后执行。
这个操作在需要动画完成后进行一些列方法调用的时候用很大的用处

更具体的使用可以参看这个中文文档:http://www.css88.com/jqapi-1.9/animate/

文章目录
,