jQuery的动画操作

jQuery动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏，不可见就显示

以上动画方法都可以添加参数

1、第一个参数是动画执行的时长，以毫秒为单位

2、第二个参数是动画的回调函数（动画完成后自动调用的函数）

淡入淡出动画

fadeIn() 淡入（慢慢可见）

fadeOut() 淡出（慢慢消失）

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值（0不可见，1完全可见，0.5半透明）

fadeToggle() 淡入/淡出切换

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <style>
        
        div#div1{
            float:left;
            border: 1px solid;
            background-color: blue;
             300px;
            height: 200px;
        }
        table,td {
            border: 1px solid;
            border-collapse: collapse;
            float:left;
        }

    </style>
    <!--引入jQuery库-->
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      
      $(function(){
        //show，
        $("#btn1").click(function(){
            $("#div1").show(1000,function(){
                alert("show动画完成")
            });
        });
        //hide
        $("#btn2").click(function(){
            $("#div1").hide(1000,function(){
                alert("hide动画完成")
            });
        });
        // var test=function(){
        //     $("#div1").toggle(1000,test);
        // }
        // test();
        $("#btn3").click(function(){
            $("#div1").toggle(1000);
        });
        //fadeIn，慢慢显现
        $("#btn4").click(function(){
           $("#div1").fadeIn(1000,function(){
               alert("fadeIn完成")
           }); 
        });
        //fadeOut
        $("#btn5").click(function(){
            $("#div1").fadeOut(1000);
        });
        $("#btn6").click(function(){
            $("#div1").fadeTo(2000,0.5,function(){
                alert("fadeTo完成")
            });
        });
        $("#btn7").click(function(){
            $("#div1").fadeToggle();
        });
      });

      
    </script>
    </head>
    <body>
            <table>
                <tr>
                    <td><button id="btn1">显示show()</button></td>
                </tr>
                <tr>
                    <td><button id="btn2">隐藏hide()</button></td>
                </tr>
                <tr>
                    <td><button id="btn3">显示/隐藏切换toggle()</button></td>
                </tr>
                <tr>
                    <td><button id="btn4">淡入fadeIn()</button></td>
                </tr>
                <tr>
                    <td><button id="btn5">淡出fadeOut()</button></td>
                </tr>
                <tr>
                    <td><button id="btn6">淡化到fadeTo()</button></td>
                </tr>
                <tr>
                    <td><button id="btn7">淡化切换fadeToggle()</button></td>
                </tr>
           </table>
        <div id="div1" >
            jQuery动画定义了很多种动画效果，可以很方便的使用这些动画效果
        </div>
    </body>
</html>