jQuery 动画篇

1、动画基础隐藏和显示（show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置）

（1）隐藏元素的hide方法

快捷参数：

.hide("fast / slow") 'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

方法一
<script type="text/javascript">
    //点击buttom1 执行动画隐藏
    $("button:first").click(function() {
          $("#a2").hide({
                duration: 3000,
                complete: function() {
                alert('执行3000ms动画完毕')
                }
          })
    });
</script>
方法二
<script type="text/javascript">
    //点击buttom2 执行动画隐藏
    $("button:last").click(function() {
        $("#a1").hide(3000,function(){
            alert('执行3000ms动画完毕')
        })
    });
</script>

（2）显示元素的hide方法

   
   
   

    
    
    hide-show
   
   
   
直接hide-show动画

<script type="text/javascript">
    //点击button
    //执行3秒隐藏
    //执行3秒显示
    $("button").click(function() {
        $("#a1").hide(3000).show(3000)
    });
</script>

（3）显示与隐藏切换toggle方法

//.left  .right 为两个div块

<script type="text/javascript">
    $("button:first").click(function() {
        $(".left").toggle(3000)
    });
</script>

<script type="text/javascript">
    $("button:last").click(function() {
        $(".right").toggle(3000)
    });
</script>