javascript - 这个JS block 怎么会人手不足呢？ (JS 复习)

Question

我已经有一段时间(2年)没有使用JS了，我似乎忘记了一些基础知识；

所以我的问题是:我如何清理或“简化”以下 JavaScript？

它将帮助我改进我的 JS 代码(也许还能让我开动脑筋 - 哈哈)。

    var tl = TweenLite.to;

    tl("#container", 0, {autoAlpha:0});
    tl("#header", 0, {top:"-70px"});
    tl("#footer", 0, {bottom:"-180px"});

    function showPage() {
        tl("#container", .2, {autoAlpha:1, delay:.5});
        tl("#header", .2, {top:"0px", delay:.8});
        tl("#footer", .2, {bottom:"-150px", delay:.8});
    } window.onload = showPage;

...显然我正在使用 TweenLite我没有使用 jQuery，但我正在使用 Zepto 。感谢您的帮助。

-杰森

Answer 1

类似这样的事情:

var tl = TweenLite.to,
    duration = 0.2;

// Set starting states in CSS

function showPage() {
    tl("#container", duration, {autoAlpha: 1, delay: .5});
    tl("#header", duration, {top: "0px", delay: .8});
    tl("#footer", duration, {bottom: "-150px", delay: .8});
} 

window.onload = showPage;

您还可以查看TweenLite.from方法，它允许您执行逆操作并最初设置完成状态并指定补间的位置。