《锋利的jQuery》读书笔记（动画）

1.show()和hide()

实质就是改变当前DOM对象的display为block、none或inline-block（取决于之前的display），如下：

$("element").hide();
$("element").show();

此外，这两个方法还可以加个“速度”的参数，参数如下：

fast（200ms）、normal（400ms）、slow（600ms）；除此之外，还可以是以毫秒为单位的纯数字：

$("element").hide("fast");
$("element").show();

这个带参的方法，作用是使得该DOM的height、width、opacity属性都呈阶梯变化。

2.fadeIn()和fadeOut()

方法同上，效果与之不同的是，该方法只使得该DOM的opacity阶梯性变化。

3.slideUp()和slideDown()

方法同上，效果与之不同的是，该方法只使得该DOM的height阶梯性变化。

4.自定义动画animate()

该方法接受三个参数：params、speed、callback

注意：执行自定义动画的DOM元素必须是绝对定位（absolute）或者相对定位（relative）

//3秒内，left属性加至100px
$("DOM").animate(
　　　　{left:"100px"},
　　　　3000
);
//3秒内，left属性在原有基础上加100px
$("DOM").animate(
　　　　{left:"+=100px"},
　　　　3000
);

综合多重动画：

$("DOM").animate(
　　　　{left:"+=100px",height:"+=100px"},
　　　　3000
　　　　).animate(
　　　　{left:"-=100px",height:"-=100px"},
　　　　3000
);

回调函数的使用（适用于以上所有jQuery动画）：

$("DOM").animate(
　　{left:"+=100px",height:"+=100px"},
　　3000,
　　function(){
　　　　$(this).css("border","5px solid")
　　}
);

5.stop()

.stop(clearQueue,gotoEnd)

//两个参数的值类型都是布尔值

//clearQueue表示是否清空未执行完的动画队列

//gotoEnd表示直接将当前动画跳转至末状态

6.delay()

该方法用于动画的延迟操作

$("DOM").animate(A)
        .delay()
        .animate(B)
        .delay()
        .animate(C)  

7.可见度动画

toggle()：

该动画可以切换元素的显隐状态（display属性），相当于在hide()和show()两种方法之间进行切换

slideToggle()：

该动画通过改变元素的高度（height属性）来控制元素的显隐状态，相当于在slideUp()和slideDown()之间切换

fadeTo(600,0.2)：

该动画改变元素的透明度，两个参数表示在600ms内，透明度升至/降至0.2

fadeToggle()：

该动画通过改变透明度（0或者1）来控制元素的显隐状态，相当于在fadeIn()和fadeOut()之间作切换