1

我已经尝试了很多来缩短我的片段，但没有什么对我有用。

这里是：

var logoTitle = $(".logoTitle");

logoTitle.children(".char3, .char4").delay(300).each(function() {
    $(this).animate({
        'margin-top':'0', 
        'opacity':'1'
    }, 330, "easeOutQuart");
});

logoTitle.children(".char2, .char5").delay(600).each(function() {
    $(this).animate({
        'margin-top':'0', 
        'opacity':'1'
    }, 330, "easeOutQuart");
});

logoTitle.children(".char1, .char6").delay(900).each(function() {
    $(this).animate({
        'margin-top':'0', 
        'opacity':'1'
    }, 330, "easeOutQuart");
});

我怎样才能缩短这个时间并提高效率？

4

4 回答 4

0

如果您希望它立即运行，就像您的原始脚本一样：

(function animateLogoChildren(theChildren, theDelay){
    var logoTitle = $(".logoTitle");

    logoTitle.children(theChildren).delay(theDelay).each(function() {
        $(this).animate({
            'margin-top':'0', 
            'opacity':'1'
        }, 330, "easeOutQuart");
    });
})(".char3, .char4", 300);

如果您希望它在通话中运行：

function animateLogoChildren(theChildren, theDelay){
    var logoTitle = $(".logoTitle");

    logoTitle.children(theChildren).delay(theDelay).each(function() {
        $(this).animate({
            'margin-top':'0', 
            'opacity':'1'
        }, 330, "easeOutQuart");
    });
}

animateLogoChildren(".char3, .char4", 300);
animateLogoChildren(".char2, .char5", 600);
animateLogoChildren(".char1, .char6", 900);

鉴于我如何清理代码，第二个很可能是您要查找的内容。希望这可以帮助！

于 2013-04-11T23:22:10.040 回答
0

您不需要每个功能。如果您对高效的定义是下载，这将使其更加“高效”。但是在速度方面，您无能为力。

var logoTitle = $(".logoTitle");

logoTitle.children(".char3, .char4").delay(300).animate({
        'margin-top':'0', 
        'opacity':'1'
    }, 330, "easeOutQuart");
logoTitle.children(".char2, .char5").delay(600).animate({
        'margin-top':'0', 
        'opacity':'1'
    }, 330, "easeOutQuart");
logoTitle.children(".char1, .char6").delay(900).animate({
        'margin-top':'0', 
        'opacity':'1'
    }, 330, "easeOutQuart");
于 2013-04-11T23:24:09.690 回答
0

我希望制作一个自定义动画功能以允许重用代码，例如：

var logoTitle = $(".logoTitle");

$.fn.myAnimate = function(delayTime) { 
    return $(this).delay(delayTime).each(function(){
        $(this).animate({
            'margin-top':'0', 
            'opacity':'1'
        }, 330, "easeOutQuart");
    })
}

logoTitle.children(".char3, .char4").myAnimate(300);
logoTitle.children(".char2, .char5").myAnimate(600);
logoTitle.children(".char1, .char6").myAnimate(900);
于 2013-04-11T23:24:33.043 回答
0

试试这个：

var logoTitle = $(".logoTitle");

function animate_kids(kids, delay) {
    kids.delay(delay).animate({
            'margin-top': 0,
            'opacity': 1
        }, 330, "easeOutQuart"); 
    });
};

animate_kids(logoTitle.children(".char3, .char4"), 300);
animate_kids(logoTitle.children(".char2, .char5"), 600);
animate_kids(logoTitle.children(".char1, .char6"), 900);

如果您有任何问题，请告诉我。祝你好运！:)

于 2013-04-11T23:25:01.383 回答