fadeIn()

功能

通过淡入的方式显示匹配元素。

语法

fx.fadeIn(elm, duration, callback)

参数

  • elm
    HTMLElement对象,指定对象HTML元素
  • duration
    一个字符串或数字来决定动画的运行时间
  • callback
    动画完整后调用的函数

范例

Example: 淡入所有段落,在一定时间(毫秒)完成这些动画。

<!DOCTYPE html>
<html>

<head>
    <style>
    span {
        color: red;
        cursor: pointer;
    }
    
    div {
        margin: 3px;
        width: 80px;
        display: none;
        height: 80px;
        float: left;
    }
    
    div#one {
        background: #f00;
    }
    </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>
    <span id="target">Click here...</span>
    <div id="one"></div>
    <script>
    require(["skylark/query", "skylark/finder", "skylark/fx"], function(query, finder, fx) {
        query("body").on("click", function() {
            fx.fadeIn(finder.find("div"), "slow");
        });
    });
    </script>
</body>

</html>