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 回答