JQuery动画

2动画

2.1显示隐藏

Hide():隐藏

将宽度、高度、透明度变为0 display为“none”

show():显示

将高度、宽度、透明度变为初始的css设置的时候，display为“block”

toggle():切换

如果display为none的时候，点击一下就变成了block反之变为none

2.2淡入淡出

fadeIn():淡入

将隐藏的样式通过改变其透明度（0到1），让他显示出来

fadeOut():淡出

将显示的样式通过改变其透明度（透明度从0到1），让他隐藏起来

fadeToggle():淡入淡出的切换

如果样式隐藏则让他显示，如果显示让他消失

fadeTO()：固定其透明度（透明度0到1之间）

2.3上滑下滑

Slideup():上滑

将设置的高度从初始状态变为0，然后隐藏

SlideDown():下滑

先显示它，然后将设置的高度从0变为初始

slideToggle()：上滑与下滑的切换

如果元素是隐藏的，则让他显示，，并且把它的高度增加，如果元素时显示的话，先将高度高度减为0，再隐藏他

2.4动画

自定义动画

移动一块的位置到另一块

同时使用多个属性是实现动画效果（移动位置，颜色淡化，大小的改变）

$("button").click(function(){
    //设置多个css样式
    //设置相关属性
    $("#p").animate({
        left:"300px",

top:"200px",
        width: "+=100px",
        height: "+=100px",
        opacity:"0.4"
    })
});

改变预定义值来实现我们所需要的内容的显示或者隐藏

$("#p").animate({
    height:"toggle"
})

.Animate（）中有三个参数：
第一个参数是需要改变的样式
第一个参数是需要改变的样式
第二个参数是显示的速度（slow，fast，指定毫秒数）
第三个参数回调函数

var div =$("div");
$(".start").click(function(){
    //设置多个css样式
    //设置相关属性
   div.animate({width:"300px"},"slow");
   div.animate({height:"300px"},"slow");
    div.animate({width:"100px"},"slow");
    div.animate({height:"100px"},"slow");
});
$(".stop").click(function(){
    div.stop(true);
});