web基礎學習筆記(二十)之jquery動畫操作

weixin_44014196發表於2020-10-01
Web筆記jQuery動畫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script src="jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //顯示
            $("#btn1").click(function () {
                $("#div1").show(1000,function () {
                    alert("show動畫完成")
                });   /*可以加時間和回撥函式*/
            });
            //隱藏
            $("#btn2").click(function () {
                $("#div1").hide();
            });
            //切換
            $("#btn3").click(function () {
                $("#div1").toggle();
            });

            /*
            迴圈進行動畫
            var abc = function(){
                $("#div1").toggle(1000,abc);
            };
            abc();*/

            //淡入
            $("#btn4").click(function () {
                $("#div1").fadeIn();
            });
            //淡出
            $("#btn5").click(function () {
                $("#div1").fadeOut(2000);  /*2000ms  可加時間和函式 同上*/
            });
            //淡化到
            $("#btn6").click(function () {
                $("#div1").fadeTo(1000,0.5,function () {
                    alert("變半透明");
                });
            });
            //淡化切換
            $("#btn7").click(function () {
                $("#div1").fadeToggle()
            });
        });
    </script>
</head>
<body>
    <!--jquery動畫操作

    基本動畫:
        show()將隱藏的元素顯示
        hide()將可見的元素隱藏
        toggle()可見就隱藏不可見就顯示
    動畫效果:
        slideDown()
        slideUp()
        slideToggle()
        fadeIn()淡入
        fadeOut()淡出
        fadeTo()淡化到     在指定的時長內慢慢將透明度修改到指定的位置，0透明  1完全可見   0.5半透明
        fade TOggle()淡化切換-->
    <table style="...">
        <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>
        <div id="div1" >
            jquery動畫定義了很多動畫效果，可以很方便的使用這些動畫效果
        </div>
    </table>
</body>
</html>

相關文章