Effects-Custom

Posted on 2016-07-11 Edited on 2023-11-24 In jQuery Views: Disqus:

一、.animate()

經由設定CSS屬性來做成客製化動畫。

.animate( PlainObject properties [, duration ] [, String easing ] [, Function complete ] )

.animate( PlainObject properties, PlainObject options )

.animate()方法只支援CSS屬性是單一數值形式的內容，而字串形式的內容大部份都不支援。

.animate()方法所支援的CSS屬性皆可使用"show"、'hide"、"toggle"字串。

範例一、

當按下按紐時在一秒時間內，圖片由左向右位移50單位，透明度變至0.25。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <style>
        #book {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        $("#clickme").click(function () {
            $("#book").animate({
                opacity: 0.25,
                left: "50",
            }, 1000, function () {
                // Animation complete.
            });
        });
    </script>
</body>
</html>

範例二、透明度使用toggle字串。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <style>
        #book {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        $("#clickme").click(function () {
            $("#book").animate({
                opacity: "toggle",
                left: "50",
            }, 1000, function () {
                // Animation complete.
            });
        });
    </script>
</body>
</html>

範例三、可利用字串"+="或"-="來對每次.animate()觸發都做位移，而不是僅僅移到定位而已。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <style>
        #book {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        $("#clickme").click(function () {
            $("#book").animate({
                left: "+=50",
            }, 1000, function () {
                // Animation complete.
            });
        });
    </script>
</body>
</html>

範例四、每一個屬性個別設定easing，在.animate()方法所支援的CSS屬性，

可以接受[ CSS values , easing ]陣列形態。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <style>
        #book {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        $("#clickme").click(function () {
            $("#book").animate({
                width: ["toggle", "swing"],
                height: ["toggle", "swing"],
                opacity: "toggle"
            }, 5000, "linear", function () {
                $(this).after("<div>Animation complete.</div>");
            });
        });
    </script>
</body>
</html>

二、.clearQueue()

請參考Data的第一項。

三、.delay()

用來指定動作與動作之間的時間間隔。

.delay( Integer duration [, String queueName ] )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="clickme">
        Click here
    </div>

    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        // With the element initially hidden, we can show it slowly:
        $("#clickme").click(function () {
            $("#book").slideUp(300).delay("slow").fadeIn(400);
        });
    </script>
</body>
</html>

注意，.delay()方法無法延遲.show()與.hide()的時間。

.delay()方法也接受字串參數 "slow"、"fast"。

四、.dequeue()

請參考Data的第三項。

五、.finish()

用來停止現在正在跑的動畫，直接跳到動畫結束點。

.finish( [ String queue ] )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <div id="finish">
        finish
    </div>

    <img id="book" style="display:none;" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        $("#clickme").click(function () {
            $("#book").fadeIn(3000);
        });

        $("#finish").click(function () {
            $("#book").finish();
        });
    </script>
</body>
</html>

六、jQuery.fx.interval

用來調整動畫每秒幾個frame或是每個frame花幾秒。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.fx.interval demo</title>
    <style>
        div {
            width: 50px;
            height: 30px;
            margin: 5px;
            float: left;
            background: green;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p><input type="button" value="Run"></p>
    <div></div>

    <script>
        jQuery.fx.interval = 1000;
        $("input").click(function () {
            $("div").toggle(3000);
        });
    </script>
</body>
</html>

jQuery.fx.interval的預設值是每個frame花13毫秒，

所以數值越低動畫越順暢，但也越耗CPU。

七、jQuery.fx.off

用來決定全域動畫是否關掉演示，預設值是false(不關掉)。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.fx.off demo</title>
    <style>
        div {
            width: 50px;
            height: 30px;
            margin: 5px;
            float: left;
            background: green;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <input type="button" value="Run">
    <button>off</button>
    <div></div>

    <script>
        $("button").click(function () {
            $.fx.off = true;
        });

        $("input").click(function () {
            $("div").toggle(1000);
        });
    </script>
</body>
</html>

八、jQuery.speed()

用來提供動畫統一預設值，而不用再特別指定duration、easing、complete function

jQuery.speed( [duration ] [, Function settings ] )

jQuery.speed( [duration ] [, String easing ] [, Function complete ] )

jQuery.speed( PlainObject settings )

但我還沒有試成功過。

九、.queue()

請參考Data的第九項。

十、.stop()

停止現在正在跑的動畫。

有兩種多載方法

1、.stop( [ Boolean clearQueue ] [, Boolean jumpToEnd ] )

clearQueue：停止時也一併清掉queue裡的所有動畫，預設為false。

jumpToEnd：停止時直接將正在執行的動畫瞬間執行完畢，預設為false。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>queue demo</title>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 30px;
            background: green;
            display: none;
        }

            div.newcolor {
                background: blue;
            }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div></div>

    <script>
        $("#start").click(function () {
            $("div")
              .show("slow")
              .animate({ left: "+=200" }, 5000)
              .queue(function () {
                  $(this).addClass("newcolor").dequeue();
              })
              .animate({ left: '-=200' }, 1500)
              .queue(function () {
                  $(this).removeClass("newcolor").dequeue();
              })
              .slideUp();
        });
        $("#stop").click(function () {
            $("div").stop(true, true);
        });
    </script>
</body>
</html>

2、.stop( [ String queue ] [, Boolean clearQueue ] [, Boolean jumpToEnd ] )

第一個參數為指定哪一個queue名稱要被停止，

至於後兩個參數請參考上一個多載方法的說明。