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);

2 番目は、コードをクリーンアップした方法を考えると、あなたが探しているものである可能性が最も高いです。お役に立てれば！

于 2013-04-11T23:22:10.040 に答える
0

each 関数は必要ありません。これにより、効率的な定義がダウンロードである場合、より「効率的」になります。しかし、速度に関しては、できることはあまりありません。

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 に答える