.animate()的用法

Posted on Edited on In Views: Disqus:

 

animate的基本用法為.animate( properties [, duration ] [, easing ] [, complete ] )

properties為目的效果、duration為作用期間、easing為時間曲線、complete為call back function，

duration(預設值為400ms)、easing(預設值為swing)、complete這三者為選項可有可無。

範例如下

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#demo").animate(
                    { left: '250px' },
                    2000,
                    'linear'
                );
            });
        });
    </script>
    <style>
        #demo {
            background: #98bf21;
            height: 100px;
            width: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
    <button>Start Animation</button>
    <div id="demo"></div>
</body>
</html>

額外說明：

1、easing有swing和linear兩種樣式，需要更多變化時可以使用外部plugin，如jQuery UI。

2、properties為目的效果可以不只只有一項，唯一要注意的是CSS目的屬性必須要使用camel-cased寫法。

3、可以使用相對數值

上一個範例是指元素動畫要右移到絕對位置250px，而下面範例是指在原位置再加上250px

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#demo").animate(
                    { left: '+=250px' },
                    1000,
                    'linear'
                );
            });
        });
    </script>
    <style>
        #demo {
            background: #98bf21;
            left: 100px;
            height: 100px;
            width: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
    <button>Start Animation</button>
    <div id="demo"></div>
</body>
</html>

 

參考資料：

jQuery Effects - Animation

jQuery animate() Method

.animate()

Easings

jQuery Easing Plugin (version 1.3)