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;
            width: 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>

jQuery的动画操作

上一篇:vue3 自定义 hooks 优雅处理异步调用 ajax


下一篇:vue中导入webpack-jquery-ui依赖报错