jQuery中的动画理论干货

【jQuery中的动画】

通过jQuery动画能够轻松地为页面添加精彩的视觉效果

【show()方法和hide()方法】
1、show()方法和hide()方法是jQUERY中最基本的动画方法，相当于在css中的display属性，hide()相当于css中的display：none；这两个方法用来控制内容的“显示”和“隐藏”。
具体结构如下：
$("element").hide();
2、show()方法和hide()方法让元素动起来：这两个方法在不带参数的情况下，相当于css("display","none/block/inline");作用
是立添加显示或隐藏，不会有动画效果，如果希望元素动画起来，可以show()传一个速度参数，速度关键字有
（“slow”，“normal”，“fast”），也可以自定义速度值。hide()方法同样如此。

【fadeIn()方法和fadeOut()方法】
与show()方法不同的是，fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOutah（）方法在一定时间内降低元素的不透明度，直到元素消失，fadeIn（）则相反。

【slideUp()和slideDown()方法】
这两个方法只改变元素的高度，如果一个元素的display属性为“none”，当调用slideDown（）时，这个元素会由上至下延伸显示
，slideUp恰好相反。

【自定义动画方法animate()】
animate()方法自定义动画语法结构为：animate（param,speed,callback）;
参数说明：（1）params:一个包含样式属性及值得映射；
（2）第二个为速度参数；
（3）callback：在动画完成时执行的函数，可选。
animate()方法自定义动画还可以实现累加，累减动画，例如：在移动动画上用“+=”或“-=”就可以实现当前位置上的累加或累减，{left:"+=500px"}。
也可以实现"多重动画"，既可以同时绑定多个事件处理函数。可以实现同时执行多个动画，也可以实现按顺序执行，这种方式称为
“动画队列”。

【动画中的回调函数】
在某些例子中，如果想在动画的最后一步切换元素的css样式，而不是隐藏元素，直接在后面把fadeOut()方法变成css样式是没有
效果的，动画执行时，css就开始执行，因为css并没有加入到“动画对列”中去。
为了解决这个问题，我们可以使用回调函数对非动画方法实现排队，只要把css()方法写入最后一个动画的回调函数里即可。

【停止动画和判断是否处于动画状态】
1、停止元素的动画
很多时候需要停止匹配元素的动画，使用stop()方法，结构为：stop（[clearqueue],[gotoEnd]）;
两个参数都是可选的，都是布尔值，分别代表是否清空未执行完的动画对列，和是否直接将正在执行的动画跳转到末状态。
2、判断元素是否处于动画状态
在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致，当用户快速点击在某个元素上执行animate动画时，就会出现动画积累，这时就需要判断一下元素是否处于动画状态，如果不处于就添加动画，

代码如下：if(!$(element).is(":animate")){//判断元素是否处于动画状态
//如果当前没有动画，就添加动画
}
3、延迟动画
有时候需要在页面中对动画进行延迟，可以使用delay()方法，他可以推迟动画对列中的函数执行。

【其他动画方法】
jQuery中还有4个专门用于交互的动画方法。
1、toggle()方法：该方法可以切换元素的可见状态，如果元素可见，则切换为隐藏。
2、slideToggle()方法：该方法通过高度变化来切换匹配元素的可见性。当单击“标题”连接后，“内容”会在可见和隐藏两种状
态中切换，不过是通过改变高度来实现的。
3、fadeTo()方法：该方法可以吧元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的
高度不会变化。
4、fadeToggle()方法：该方法通过不透明度变化来切换匹配元素的可见性，这个动画只调整元素的不透明度。

特别注意：animate9)方法，可以用来代替其他所有的动画方法。

都是干货，相关练习还得自己动手。