animate()

功能

执行一组CSS属性的自定义动画。还有一个例外，这个方法还支持不属于CSS属性的scrollTop属性。

语法

fx.animate(elm, properties, duration, ease, callback, delay)

参数

elm
HTMLElement对象，指定对象HTML元素
properties
一个CSS属性和值的对象,动画将根据这组对象移动
duration
一个以毫秒为间隔的字符串或者数字决定动画将运行多久。
ease
一个字符串，表示过渡使用哪种缓动函数
callback
动画完成后调用的函数
delay
确定动画延迟时间的数字 (以毫秒为单位)。

范例

Example: 点击按钮，根据指定的一系列属性，在 div 上应用动画。

<!DOCTYPE html>
<html>

<head>
    <style>
    div {
        background-color: #bca;
        width: 100px;
        border: 1px solid green;
    }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
    <script>
    require.config({
        baseUrl: "./",
        packages: [{
            name: "skylark",
            location: "../../../src/skylark"
        }, ]
    });
    </script>
</head>

<body>
    <button id="go">&raquo; Run</button>
    <div id="block">Hello!</div>
    <script>
    require(["skylark/query", "skylark/finder", "skylark/fx"], function(query, finder, fx) {
        query("#go").on("click", function() {
            fx.animate(finder.byId("block"), {
                width: "70%",
                opacity: 0.4,
                marginLeft: "0.6in",
                fontSize: "3em",
                borderWidth: "10px"
            }, 1500);
        });
    });
    </script>
</body>

</html>