jQuery中的动画

show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法，在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”

 

当把元素隐藏以后，可以使用show()方法将元素的display样式设置为先前的显示状态（"block"或"inline"或其他除了"none"之外的值）

 

fadeIn()方法和fadeOut()方法

与show()方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的透明度，fadeIn()方法会在指定的一段时间内降低元素的不透明度，直至元素完全消失，fadeOut()方法则相反。

 

slideUp()方法和slideDown()方法

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

 

自定义动画方法animate()

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

在使用animate()方法之前，为了能影响该元素的“top”、“left”、“buttom”和“right”样式属性，必须先把元素的position样式设置为“relative”或者“absolute”

动画的回调函数：

css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数中即可。

callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数：

 

停止动画和判断是否处于动画状态

停止元素的动画：stop()方法

stop()方法的语法结构为：stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数，为Boolean值（true或者false）。clearQueue代表是否要清空未执行完的动画队列。gotoEnd代表是否直接将正在执行的动画跳转到末状态。

如果使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。

 

判断元素是否处于动画状态：

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

 

 延迟动画：在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法

delay()方法允许我们将队列中的函数延时执行

 

其他动画方法

①toggle()方法

toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的，如果元素是隐藏的，则切换为可见的。

单击“标题”链接后，“内容”会在可见和隐藏两种状态之间切换。

②slideToggle()方法：slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

单击“标题”链接后，“内容”会在可见和隐藏两种状态之间切换，不过是通过改变元素的高度来实现的。

③fadeTo()方法：fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值，这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

④fadeToggle()方法：fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。

 

动画方法概括

动画队列：

①一组元素上的动画效果

（1）当在一个animate()方法中应用多个属性时，动画是同时发生的。

（2）当以链式的写法应用动画方法时，动画是按照顺序发生的（除非queue选项值false）。

②多组元素上的动画效果

（1）默认情况下，动画都是同时发生的。

（2）当以回调的形式应用动画方式时（包括动画的回调函数和queue()方法的回调函数），动画是按照回调顺序发生的。

css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中或者queue()方法中。