3

jQuery キューは非常に煩わしい - 理解できない...

次の関数には、次々に（同時にではなく）発生させたい4つのアニメーションが含まれています。

function startupAnime() {

    $("#header").animate({"opacity":"1"},{duration:3000, queue:"global"});
    $("#header").animate({"top":"0px"},{duration:3000, queue:"global"});
    &("#loader").animate({"opacity":"0"},{duration:3000, queue:"global"});
    $("#background").animate({"background-position" : "300px center"},{duration:3000, queue:"global"});
}

$(window).load(function() { 

    startupAnime();
})

2 つの #header 要素は次々にアニメーション化されますが、残りはすべて同時に発生します。

その後、同じ要素をアニメーション化する場合にのみキューが機能することがわかりました!! それはあまり役に立ちません...しかし、 queue:"name" を追加すると、明らかにそれらを同じキューにリンクすることになっています...ただし、これにより、それらが機能しなくなります。

ここで何か不足していますか？キューが「現在のアニメーションが終了したときに次のアニメーションが開始される」ことを意味するのか、それとも「これらのアニメーションはキューに保持されており、あなたがそれらを解放するのを待っている」ことを意味するのか、おそらく queue("global") または何か!?

ほとんどの提案は、1 つの要素をアニメーション化すること、または多くの関数を設定し、コールバックを使用して関数を「反復」することについて話しています。アニメーションのリストをいつでも実行できるようにしたいだけです。

注: アニメーションの「リスト」は要素を 1 つずつアニメーション化する場合がありますが、リストのある時点で 2 つ以上の要素を同時にアニメーション化することもできます。サンプルは次のとおりです。

animate element A
-> then ->
animate element B
-> then ->
animate element C and D together
-> then ->
animate element E
4

3 に答える 3

10

選択肢はたくさんありますが、私なら次のようにします (一目瞭然の構文が好きなので)。

$.when(
    $("#header").animate({opacity: 1}, 3000).promise(),
    $("#header").animate({top: 0}, 3000).promise()
).done(function() {
    $("#loader").animate({opacity: 0}, 3000).promise()
    .done(function() {
        $("#background").animate({"background-position" : "300px center"}, 3000)
    })
})

デモ: http://jsfiddle.net/vjazX/

于 2013-08-28T22:36:50.763 に答える
3

いくつかのオプションがあります。

遅らせる：

$("#loader").delay(6000).animate({"opacity":"0"},{duration:3000});
$("#background").delay(9000).animate({"background-position" : "300px center"},{duration:3000});

コールバックを使用します。

function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000,function(){
        $("#loader").animate({"opacity":"0"},3000,function(){
            $("#background").animate({"background-position" : "300px center"},3000);
        });
    });   

}

または遅延オブジェクトを使用します。

function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000).promise().done(function(){
        $("#loader").animate({"opacity":"0"},3000).promise().done(function(){
            $("#background").animate({"background-position" : "300px center"},3000);
        });
    });   

}

別の遅延オブジェクト オプション:

function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000).promise().then(function(){
        return $("#loader").animate({"opacity":"0"},3000).promise();
    }).done(function(){
        $("#background").animate({"background-position" : "300px center"},3000);
    });

}

ばかげているので、カスタム キューイングも投稿しません。

それらのどれも本当にきれいではありません。あなたの毒を選んでください。.delay() は私には最もきれいに見えますが、保守性が低い場合があります。代替案もそれほど保守可能ではありませんが。

もし私がしなければならないなら、私は2番目の遅延オブジェクトサンプルを使用します.

于 2013-08-28T22:12:04.087 に答える
0

jQuery promise API を使用してみてください。各 jQuery 要素から promise を取得し、done コールバックをそれにアタッチできます。

例えば、

$("#header").animate({"opacity":"1"},{duration:3000 }).promise().done(function () {
    $("#header").animate({ "top":"0px" },{ duration:3000 });
});

詳細については、jQuery の promise API を参照してください。 http://api.jquery.com/promise/

于 2013-08-28T22:11:05.240 に答える