jQuery中的动画大致分为三类：
- 基本动画方法hide()和show()到fadeIn()和fadeOut(),然后到slideUp()和slideDown()方法。
- 自定义动画animate()
- 交互动画方法toggle()、slideToggle()、fadeTo()和fadeToggle()。
1、show()和hide()方法
- hide()方法，会将该元素的display样式改为“none”。
- hide()方法在将”内容“的display属性值设置为"none"之前，会记住原先得display属性值("block"或"inline")。
- show()和hide()方法可以传入一个速度参数，这个参数可以是关键字”slow“，”fast“，”normal“，还可以具体的一个单位为毫秒的数字。
- show()和hide()方法会同时改变”内容“的高度、宽度和不透明度。
2、fadeIn()和fadeOut()方法
- 与show()和hide()方法不同的地方是，只改变元素的不透明度。
3、slideUp()和slideDown()方法
- 与前面两类不同的是，只改变元素的高度。
4、自定义动画方式animate()
animate(params,speed,callback)
(1)params：一个包含样式属性及值得映射，比如{property1:"value"}。
(2)speed：速度参数，可选。
(3)callback：在动画完成时执行的函数，可选。
- 为了让元素动起来，就要更改元素的"top","left","bottom"和"right"样式属性，必须先把元素的position样式设置为"relative"或"absolute"。
- 可以实现累加、累减动画效果
$(this).animate({left:"+=200px"},300);
- 动画的回调函数适用于jQuery中所有的动画效果方法，可以对非动画方法，例如css()等，实现排队，不会立即执行。
5、停止动画和判断是否处于动画状态
stop([clearQueue],[gotoEnd])
- 参数clearQueue和gotoEnd都是可选参数，为Boolean值。clearQueue代表是否清空未执行的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
- 如果直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。
- 经常会遇到一种情况，在为一个元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，当这个动画效果还没结束时，用户就将光标移出这个元素了，那么光标移出的动画效果将会放进队列之中，等待光标移入的动画结束后再执行。如果光标移入移出得过快就会导致动画效果与光标的动作不一致。要解决这个问题，只需要在光标的移入、移出动画之前加入stop()方法、就能解决这个问题。
$(function(){
$(".panel").hover(function(){
$(this).stop().animate({height:"150px",width:"300px"},200);
},function(){
$(this).stop().animate({height:"22px",width:"60px"},300);
})
});
此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画，如果动画有几个阶段，还是会出现上述的不一致问题，所以可以把第一个参数(clearQueue)设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空。
- 判断元素是否处于动画状态可以使用以下的方法：
if($(element).is(":animated")){}
- 要想延迟动画的执行可以使用delay()方法，传入一个时间参数，值得注意的是，该方法只能用于位于队列中的动画方法。
6、交互式的动画方法
- toggle()方法可以切换元素的可见状态。
- slideToggle()方法通过高度变化来切换匹配元素的可见性。
- fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。
- fadeToggle()方法通过不透明度改变来切换匹配元素的可见性。
网友评论