jQuery动画

显示与隐藏：
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>```
解释：

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2956238-7c0ceecc591a9663.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
淡出淡出：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>````
未完待续......