jQuery中的动画

jQuery最基本的动画方法是show()和hide()。如果为一个jQuery对象调用hide方法，则会将该对象的display样式设置为none。调用show方法会将对象的display设置为hide之前的状态：block、inline或其他除了none之外的值。

$("#panel div").show();
$("#panel div").hide();

这2个方法还接收参数，参数可以是字符串：slow,normal,fast；也可以是数字。如果不设置参数那么是不会有动画效果的，设置了参数之后，才会有动画效果。

3个字符串表示元素显示或者隐藏的时间，分别是0.6秒，0.4秒，0.2秒。如果是数字参数的话单位是毫秒。

这2个方法会同时改变元素的高度、宽度、不透明度，直接元素隐藏或才显示。最后再设置元素的display属性。

jQuery的fadeIn(),fadeOut()只改变元素的不透明度，fadeIn指在一段时间内增加元素的不透明度，直到完全显示，fadeOut则相反。

slideUp()方法只会改变元素的高度，如果一个元素的display为none，当调用slideDown方法时这个元素将由上至下延伸显示，slideUp则相反，元素将由下至上缩短隐藏。

以上几个函数均接受之前show和hide方法介绍过的参数。

除了以上可以直接使用的动画方法还可以自定义动画效果，使用animate()方法语法如下：

animate(params, speed, callback)

params是一个包含样式属性及值的映射，{proterty1: "value1", proterty2: "value2"}
speed表示速度，可选
callback是动画完成之后的回调函数，可选

比如我们先定义一个div，id为panel1,然后设置它的样式：

#panel1{
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background: green;
  cursor: pointer;
}

再让这个方式移动并作成一个动画效果

$("#panel1").click(function(){
  $(this).animate({left: "+=500px", height: "200px", width: "300px"}, 500);
});

将这个div样式中的left属性加500px,高度增加200,宽度增加300，动画时间设置成0.5秒。

上面的动画设置了3个效果，这3个效果会一起变化，如果想让其按顺序变，那么可以这么写

$(this).animate({left: "+=500px"}, 500).animate({height: "300px"}, 500)

这样动画就有了先后顺序，称为动画队列。

animate的第3个参数也就是回调函数，指在动画执行完毕之后执行这个函数

$(this).animate({left: "+=500px"}, 500).animate({height: "300px"}, 500, function(){
  $(this).css("border", "5px solid blue");
});

在动画执行完毕后把边框变化。

jQuery还有停止正在进行的动画的方法。如果我们为一个元素设置一个动画：在鼠标移进元素的时候执行一个动画，当鼠标移出的时候执行另外外一个动画，但是如果用户鼠标移进去之后动画还没有执行完毕用户直接将鼠标移出去了，这种情况下就要使用停止动画的API了

stop([clearQueue], [gotoEnd]);

两个参数都是可选参数，为boolean值。第1个参数表示是否要清空未执行完的动画队列，第2个参数代表是否直接将正在执行的动画跳转到末状态。

$("#panel1").hover(function(){
  $(this).stop().animate({height: "150px", width: "300px"}, 1000);
}, function(){
  $(this).stop().animate({height: "22px", width: "60px"}, 1000);
});

在hover方法中的动画之前都先调用stop()方法，实际上stop执行停止执行动画的逻辑是这样的：如果不带参数，停止执行当前动画马上执行动画队列中的下一个动画。因此如果鼠标进行执行的动画有2个及2个以上的画，鼠标移出只用不带参数的stop方法是不行的，因为有可能会执行鼠标进入响应函数中的第2个动画。

这样的情况可以将stop的第1个参数设置为true，表示清空当前的动画队列。第2个参数设置为true的话可以将元素的状态直接达到结束时的状态。通常用于后一个动画基于前一个动画的最终状态的情况。

但是需要注意stop方法第2个参数设置为true的话只能达到正在执行的动画的最终状态。比如一个元素动画队列里有3个动画需要执行，目前正在执行第1个，如果这个时候调用stop方法，那么只能将元素设置为第1个动画的最终状态。

有时候我们需要判断某个元素是否处理动画状态：

$(element).is(":animated");

如果true表示正在执行动画

如果我们为某个元素设置了多个动画，但是又希望每个动画之间延迟一定的时间，可以使用delay方法

$("#panel1").animate({height: "500px"}, 1000).delay(2000)
.animate({width: "300px"}, 500);

jQuery还提供了4个专门用于交互的动画方法。toggle(), slideToggle, fadeToggle， fadeTo,。

前3个和本章一开始讲的3组动画是一样的。toogle对应用是show和hide, slideToggle对应的是slideUp和slideDown，fadeToggle对应的是fadeIn和fadeOut。都接收2个参数，分别是速度和回调函数

fadeTo接收3个参数：速度，透明度，回调函数。这个方法把元素的透明度以渐进的方式调整到指定的值。

$(this).fadeTo(600, 0.2);

将元素在0.6秒内将透明度调整为20%。