显示与隐藏：
show（） ，hide（）自动切换到的是taggle（）；
<script type="text/javascript">
$(document).ready(function(){
//让标签缩小直到消失的动画
/*
*hide()改变的是 宽度 高度和透明度 (opcity);当三个值变为0时。该标签元素的display属性值变为none；
* 参数是以毫秒为单位的数值类型。或者是以下字符串
* normal：400（代表的数值）
* slow： 600
* fast：200；
*
* show()：让标签显示出来
*
* 第二个参数是回调函数
*/
$('button').click(function(){
// $('#div1').hide(1000);
// $('#div1').show(1000);
//判断当前标签是否显示
// $('#div1').toggle(1000);
if($('#div1').css("display") == "none"){
$('#div1').show(5000);
}
else{
$('#div1').stop(true,true);
$('#div1').hide(5000);
}
});
})
</script>
stop（）：让当前之前动画停止。开启下一个动画；
<script type="text/javascript">
$(document).ready(function(){
//stop() 让当前正在执行的动画停止。开始下一个动画。
/*
*一个参数（true）的时候，该参数表示清空当前的动画队列
*两个参数的时候，第一个表示清空动画队列，第二个表示当前未执行完的动画到达动画完成的样式。
* stop();含有两个参数，
* 第一个参数是清空队列，可以立即结束动画
* 第二个参数是完成队列，可以立即完成动画
*
* */
$('#div1').hover(
function(){
$("#div1").stop(true,true); $('#div1').animate({width:"500px"},3000).animate({height:"500px"},2000);
},
function(){
$('#div1').stop(true,true); $('#div1').animate({width:"100px"},2000).animate({height:"100px"},2000)
}
)
})
</script>```
解释：
淡出淡出：fadeOut（） fadeIn（），自动切换的是fadeToggle（）；
<script type="text/javascript">
$(document).ready(function(){
//淡入淡出
$('button').click(function(){
//切换 。fadeToggle；
//$("#div1").fadeToggle(1000);
//$('#div1').fadeOut(1000);
//$('#div1').fadeIn(1000);
if($('#div1').css('display') == 'none'){
$('#div1').fadeIn(1000);
}
else{
$('#div1').fadeOut(1000);
}
})
});
</script>```
移入移出slideUp（）；slideDown（）； 自动切换slideToggle（）；
<script type="text/javascript">
$(document).ready(function(){
//移入移出
$('button').click(function(){
//slide
//$('#div1').slideUp(2000);
//$('#div1').slideDown(2000);
$('#div1').slideToggle(2000);
});
});
</script>```
延迟动画，自定义动画；
<script type="text/javascript">
$(document).ready(function(){
//延迟动画
$('button').click(function(){ $('#div1').delay(2000).animate({width:"500px"},3000).delay(1000).animate({height:"300px"},1000);
});
//延迟2秒之后，运行自定义动画，
})
</script>```
判断动画的状态：is（）方法
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//判断当前标签中是否有动画执行，如果有动画则 不再执行动画累加，如果没有 就累加、is();
if(!$('#div1').is(':animated')){
//.is()用来判断事件或者状态是否正在发生。如果正在发生返回true；如果没有返回false，通过传递animated参数用来判断当前标签是否正在执行动画。
//动画的累加.在数值前添加 "+="，"-="； $('#div1').animate({width:"+=200px",height:"+=100px"},2000);
}
})
})
</script>````
未完待续......