0

私はこのようなコードを持っています:

for(i=0;i<somevalue;i++){
   $(".elem[order='"+i+"']").delay(i*duration).animate({opacity:0},duration);
}

最後のアイテムのアニメーションが完了したときに、実行したい

$(".elem").remove();

私は現在これをやっています

$(".elem[order='"+i+"']").animate({opacity:0},duration,
function(){
    if(i==somevalue-1){
        $(".elem").remove();
    }
});

しかし、どうすれば $.Deferred でこれを行うことができますか? jQuery Deferred を学習していますが、これを解決できませんでした。

4

2 に答える 2

1

更新 2:

$.Deferred を使用した実際の例を次に示します。

<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.Deferred(function (defer) {
                    var i;
                    var duration = 1000;

                    var pipe = function(defer, index, duration) {
                        return defer.pipe(function () {
                            return $(".elem[order='" + index + "']").animate({opacity: 0}, duration);
                        });
                    };

                    defer.resolve();

                    for (i = 0; i < 5; i++) {
                        defer = pipe(defer, i, duration);
                    }

                    defer.done(function () {
                        console.log("Done, removing all .elem");
                        $(".elem").remove();
                    });
                });
            });
        </script>
        <style type="text/css">
            body { padding: 20px; }
            .elem { border: 1px solid #000; padding: 10px; opacity: 1.0; }
        </style>
    </head>
    <body>
        <div class="elem" order="0">elem 0</div>
        <div class="elem" order="1">elem 1</div>
        <div class="elem" order="2">elem 2</div>
        <div class="elem" order="3">elem 3</div>
        <div class="elem" order="4">elem 4</div>
    </body>
</html>

新しく導入された遅延に基づく更新 1

以下のコメントに答えるには、最後に起動するアニメーションでコールバックを単純に起動するのが最善の策だと思います。持続時間の決定を完全に制御できるため (つまり、ランダムに生成された持続時間ではない)、最後の持続時間を計算し、それを使用して、コールバックを起動する正しい反復であるかどうかを判断できます。

var i, callback, delay;
var onComplete = function () {
    console.log("Animations complete!");
};
for (i = 0; i < somevalue; i++) {
    delay = i * duration;
    callback = delay === ((somevalue - 1) * duration) ? onComplete : $.noop;
    //callback = i === somevalue - 1 ? onComplete : $.noop; //this can work too but doesn't check duration
    $(".elem[order='" + i + "']").delay(delay).animate({opacity:0}, duration, callback);
}

元の答え

これらすべての要素のアニメーションを同時に開始し、同じ長さにする必要があるようです。これに基づいて、単一のアニメーション呼び出しを実行し、要素のコレクションを収集するアプローチを変更することをお勧めします。

例：

var i, elements, selector;

for (i = 0; i < somevalue; i++) {
    selector = ".elem[order='" + i + "']";
    if (i === 0) {
        // Start the collection up with the first element
        elements = $(selector);
    } else {
        // Append element to the collection
        elements.add(selector);
    }
}

// Fire up the animation on all elements
elements.animate({opacity:0}, duration, function () {
    console.log("Animation complete!");
});

このコードを実際に実行したことはありませんが、動作するはずだと確信しています。

于 2012-05-17T14:09:56.920 に答える
0

var i のような変数データ型を宣言する必要があります。

for(var i=0;i<somevalue;i++){
   $(".elem[order='"+i+"']).animate({opacity:0},duration);
}
于 2012-05-17T14:01:55.740 に答える