jQuery自学教程（六）——动画

一、显示、隐藏

show()，hide()   [hide()和$().css('display'，'none/inline/block')效果相同]

这两个方法可以传递一个参数，这个参数以ms为单位控制速度，且里面包含了匀速变大变小，以及透明度变换的效果。除了直接

传ms单位的时间值，也可以传‘slow’，‘normal’，‘fast’，分别对应600ms，400ms，200ms。

这两个方法也可以传递第二个参数，回调函数。

eg：$('button').click(function(){

$('div').show('slow',function(){

alert('2016');

});

})

为了方便切换，jQuery提供了一个单独的方法toggle()，可以直接实现切换功能。

二、滑动、卷动

slideUp()，slideDown()，slideToggle()，向上收缩和向下展开。滑动卷动效果和显示隐藏效果一样，具有相同的参数（ms啊，参数啊之类）

三、淡入、淡出

jQuery提供了专门用于透明度变化的方法：fadeIn()和fadeOut()以及fadeToggle()和fadeTo()

四、自定义动画

有时候jQuery提供的简单的动画方式并不能满足我们的要求，因此其提供了animate()方法来创建自定义动画。

$('button').click(function(){

$('div').animate({  //内部传递的是一个css 的对象，同时还可以传递动画时间以及回调函数

width:'300px',

height:'200px',

opacity:0.5,

fontsize:'25px'

})

})

上面提到的动画都是固定位置的动画效果，如果要实现位移的动画效果，就要从定位方面入手。

$('button').click(function(){

$('div').animate({ 

top:'300px',

left:'200px'

})

})

五、累加、累减动画

利用“+=”和“-=”来调节，比如：

$('button').click(function(){

$('div').animate({ 

top:'+=100px'

})

})

六、综合动画

有时候希望动画按照一定的顺序来执行，因此需要用连缀或者顺序排列调用或者嵌套来实现列队动画。

eg：$('button').animate().animate()......

当列队动画很多的时候，会造成代码可读性下降，而且有一些操作会“污染”别的操作，比如css操作，由于其并不属于动画范畴

，因此通过连缀没办法将css操作连缀到动画操作中间，会自动将css操作放到第一位，只有把css操作放到指定动画操作的回调函数

里面才能起作用。故jQuery提供了一种queue()方法，可以连缀到动画操作中，在其内部的回调函数中添加css操作等其他操作。

eg： $('#box').slideUp().animate.queue(function(){ $(this).css(...)})

但是这有一个问题，就是后面无法继续连缀动画。解决方案如下

eg： $('#box').slideUp().animate.queue(function(next){ $(this).css(...); next();})

或者eg： $('#box').slideUp().animate.queue(function(){ $(this).css(...); $(this).dequeue();})

七、动画相关方法

1、停止动画

为了停止动画，jQuery提供了一个stop方法，含有两个可选参数stop(clearQueue, gotoEnd)；clearQueue传递的是一个布尔值

，代表是否清空未执行完的动画列队，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

没有参数的stop()，对于单一动画仅仅是单纯的暂停。

然而如果是列队动画，则stop()会停止掉当前的动画，直接执行后面的动画。如果要清空后面未执行的动画的话，将clearQueu

e设置为true（默认为false）。而gotoEnd如果设置为true，则会跳转到该动画的末尾位置停止（默认为false）。

2、延迟动画

jQuery中提供了delay(ms)方法，延迟动画的执行。

3、关于的动画的选择器

jQuery提供了一个查找正在运动的动画的选择器，“:animated”，可以筛选出正在运动的动画。

八、动画全局属性

1、$.fx.interval 设置动画运行的帧数，越低越流畅

$.fx.interval = xxx;

2、$.fx.off 可以关闭所有动画效果

$.fx.off = true;