jQuery学习总结之动画篇

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()方法通过不透明度改变来切换匹配元素的可见性。