jQuery中的動畫我的分享

時間 2019-12-06

標籤 jquery 動畫我的分享欄目 JQuery 简体版

原文原文鏈接

jQuery動畫

jQuery動畫分爲兩種分別是預約義動畫和自定義動畫css
- 所謂預約義動畫就是jQuery已經封裝好的
- 自定義動畫就是須要本身定義的動畫

預約義動畫

顯示與隱藏

show()方法 - 用於將指定元素顯示
show()無參數用法 - 不寫參數就沒有動畫效果
show(speed,easing,fn) - 經過同時改變元素的高度和寬度實現動畫效果
speed參數 - 表示動畫執行的時長('slow','normal'和'fast')
自定義動畫執行時長是以毫秒爲單位
easing - 用來指定切換效果,默認是'swing',,可用參數是'linear'
easing通常是配合第三方插件使用(不經常使用)
fn - 表示動畫執行完畢後調用的函數

示例代碼:jquery

<script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        顯示與隱藏
        1.無動畫版本
          * show() - 顯示
          * hide() - 隱藏
        2.有動畫版本 - 同時改變寬度和高度
          * show(speed, callback)
            * speed - 動畫執行的時長，單位爲毫秒
            * callback - 動畫執行完畢後的回調函數
          * hide(speed, callback)
            * speed - 動畫執行的時長，單位爲毫秒
            * callback - 動畫執行完畢後的回調函數
     */
    $('#box').hide(3000, function(){
        $('#box').show(3000);
    });

</script>
</body>

滑動式動畫效果

slideDown()和slideUp()只存在具備具備動畫效果的方法併發
- 注意 - 沒有無動畫版本(底層代碼預約義動畫執行的時長)
- 效果 - 改變指定元素的高度

示例代碼:ide

<script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        滑動式動畫 - slideUp()和slideDown()
        * 注意 - 沒有無動畫版本(底層代碼預約義動畫執行的時長)
        * 效果 - 改變指定元素的高度
     */
    $('#box').slideUp(3000);
    $('#box').slideDown(3000);

</script>
</body>

淡入淡出動畫

示例代碼:函數

<script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    // 改變的元素的透明度
    $('#box').fadeOut(3000);
    $('#box').fadeIn(3000);

</script>
</body>

自定義動畫

animate()方法

animate(perproties,duration,callback)
perproties - object類型, 表示設置CSS樣式屬性和值
duration - 表示動畫執行的時長,以毫秒爲單位
callback - 表示當動畫執行完畢後調用的函數
備註: 動畫執行效果 - css樣式「用大括號｛｝包裹

示例代碼:動畫

<script src="js/jquery.js"></script>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: cyan;

            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        animate()方法 - 表示自定義動畫方法
          1. animate(properties,duration,callback)
            * properties - 表示CSS樣式屬性
              * 設置動畫執行結束的樣式屬性值
            * duration - 表示動畫執行的時長,以毫秒爲單位
            * callback - 表示動畫執行完畢後的回調函數
          2. animate(properties, options)
            * properties - 表示CSS樣式屬性
              * 設置動畫執行結束的樣式屬性
            * options - 表示設置動畫的相關參數
              * duration - 表示動畫執行的時長,以毫秒爲單位
              * complete - 表示動畫執行完畢後的回調函數
              * queue - 布爾值,設置是否添加到動畫隊列中
     */
    /*$('#box').animate({
        width :800,
        height :600
    },5000);*/

    /*$('#box').animate({
        left :200
    },3000);*/

    $('#box').animate({
        left : 100
    }, {
        speed : 3000
    });
</script>
</body>

併發與排隊效果

併發效果 - 設置多個樣式屬性 - 執行動畫時, 同時改變全部樣式屬性的值
排隊效果 - 設置多個樣式屬性值 - 執行動畫時, 按照前後順序改變樣式屬性值

示例代碼:插件

<script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;

            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        併發效果 - 就是指多個動畫同時執行
        * 多個CSS的樣式屬性值同時改變 - 動畫多個值綜合效果
     */
    /*$('#box').animate({
        left : 400,
        top : 400
    }, 3000);*/

    /*
        排隊效果 - 就是指多個動畫按照定義的前後順序執行
        * 多個CSS的樣式屬性值前後改變
     */
    /*$('#box').animate({
        left : 400
    }, 3000, function(){
        $('#box').animate({
            top : 400
        }, 3000);
    });*/

    // queue - 用於控制當前的動畫效果是併發仍是排隊效果
    $('#box').animate({
        left : 400
    }, {
        duration : 3000
    }).animate({
        top : 400
    }, {
        duration : 3000,
        queue : true
    });

</script>
</body>

中止執行動畫

stop()方法沒有接收任何參數時 - 當即中止執行動畫
stop(queue)方法的第一個參數code
- false - 表示中止當前動畫，但隊列中的動畫繼續執行
- true - 表示中止當前動畫，而且清空動畫隊列
stop(queue, gotoEnd)方法的第二個參數orm
- false - 不會作任何處理
- true - 表示中止當前動畫，而且將指定元素設置爲動畫執行完畢後的樣式

示例代碼:隊列

<script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;

            position: absolute;
        }
    </style>
</head>
<body>
<button id="start">開始</button>
<button id="stop">中止</button>
<div id="box"></div>
<script>
    $('#start').click(function(){
        $('#box').animate({
            left : 800
        }, 3000).animate({
            top : 600
        }, 3000);
    });
    $('#stop').click(function(){
        /*
            * stop()方法沒有接收任何參數時 - 當即中止執行動畫
            * stop(queue)方法的第一個參數
              * false - 表示中止當前動畫，但隊列中的動畫繼續執行
              * true - 表示中止當前動畫，而且清空動畫隊列
            * stop(queue, gotoEnd)方法的第二個參數
              * false - 不會作任何處理
              * true - 表示中止當前動畫，而且將指定元素設置爲動畫執行完畢後的樣式
         */
        $('#box').stop(true, false);
    });

</script>
</body>

延遲執行動畫

delay( )方法 - 表示爲指定元素設置的動畫效果進行延遲執行「括號中填寫動畫延遲多少時間 - 以毫秒爲單位計算

示例代碼:

<script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;

            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    $('#box').animate({
        left: 800
    }, 3000).delay(1000).animate({
        top: 600
    }, 3000);

</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。