鋒利的 jQuery (第二版) jQuery 中的動畫

時間 2019-12-07

標籤鋒利 jquery 第二動畫欄目 JQuery 简体版

原文原文鏈接

4.2 jQuery 中的動畫

4.2.1 show() 和 hide()方法

show() 和 hide()方法讓元素動起來
show("slow"|"normal"|"fast") 長度分別爲600ms、400ms、200ms.
show(1000) 表示在 1000ms 內展現完畢.css

4.2.2 fadeIn() 和 fadeOut()方法

方法做用：改變元素的不透明度。html

4.2.3 slideUp() 和 slideDown()方法

方法做用：改變元素的高度。python

4.2.4 自定義動畫方法 animate() 方法

animate(params, [speed], [callback]):
1) params 爲屬性值及其映射，通常爲 json 格式;
2) speed 爲速度;
3) callback 爲動畫完成時執行函數。

1. 自定義簡單動畫jquery

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQ-動畫</title>
    <style>
    #app {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #003322;
    }
    </style>
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
    $(function() {
        $("#app").click(function() {
            $(this).animate({
                left: "100px"
            }, 300);
        });
    });
    </script>
</body>

</html>

2. 累加、累減動畫json

$(this).animate({left: "+=100px"}, 300); // 離左邊距離增長 100px

3. 多重動畫
(1) 同時執行多個動畫app

$(this).animate({left: "+=100px", height: "+=100px"}, 300); // 離左邊距離增長 100px 高度增長100px  同時執行

(2) 按順序執行多種動畫ide

$(this).animate({left: "+=100px"}, 300); // 離左邊距離增長100px  先執行
$(this).animate({height: "+=100px"}, 300); // 高度增長100px     後執行

4. 綜合動畫
以上動畫效果的混合應用函數

4.2.5 動畫回調函數

若是想在動畫執行後改變元素的 css 樣式，這時就不能使用 css() 方法，由於 css() 方法在動畫執行以前就會當即執行。因此這時候就要用到回調函數。動畫

4.2.6 中止動畫和判斷是否處於動畫狀態

stop([clearQueue],[gotoEnd]): clearQueue 和 gotoEnd 只能取 Boolean 值。
clearQueue:  
gotoEnd:

直接使用 stop() 方法，則會當即中止當前正在進行的動畫，若是後續有動畫則等待繼續進行，以剛纔的狀態執行動畫。ui

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQ-動畫</title>
    <style>
    #app {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #003322;
    }
    </style>
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
    $(function() {
        $("#app").hover(function() {
            $(this).stop()
                .animate({                // 此時觸發光標事件則會執行下面的動畫，
                    left: "+=100px",      // 而不會執行光標移出時的動畫
                }, 1000)    
                .animate({
                    height: "+=100px"
                }, 1000)
        }, function() {
            $(this).stop()
                .animate({
                    left: "-=100px",
                }, 1000)
                .animate({
                    height: "-=100px"
                }, 1000)
        });
    });
    </script>
</body>

</html>