数组中的延迟动画：如何？答案

【问题标题】：Deferred animation in array: how to?数组中的延迟动画：如何？
【发布时间】：2015-03-17 23:58:19
【问题描述】：

我正在制作一个小型 jQuery 游戏，当用户点击一个 div 时，许多其他 div 可能会消失。

到目前为止，我所做的是“点击”事件中的一个循环：

function makeDisappear(idx) {                                                      
    return $('img[data-idx="'+idx+'"]').fadeOut(5000, function() {               
    }).promise();                                                                
}                         
$('.mydiv').click(function() {                                              
    /*
    ... code do fill tabResult (which is an array)
    */
    var tabFadingOut=[];                                         
    for (var i=0; i<tabResult.length; i++) {                     
        tabFadingOut.push(makeDisappear(tabResult[i]));            
    }                                                            
    $.when.apply($, tabFadingOut).done(function() {              
        console.log('DONE');
    });                                                          
})

如果您阅读了代码，我会创建 promise() 对象并将它们放入 tabResult（这是一个数组）。然后我尝试将此数组发送到 .when() 并且它不起作用。我希望“完成”出现在控制台日志中......知道如何解决这个问题吗？

【问题讨论】：

不确定这个$('mydiv')....如果你指向一个类，它应该是$('.mydiv')
建议您在 jsfiddle.net 中创建一个简单的演示来复制问题
@RobertRozas 你说得对，这是一个更复杂的选择器，我想为示例简化，因为我认为它不相关。
您的代码对我来说似乎工作正常：jsfiddle.net/ben1729/bcq3y9nv/1
可以在 OP 中包含html、css、tabResultjs 吗？

标签： jquery promise fade deferred

【解决方案1】：

您的代码对我来说似乎运行良好。请看工作小提琴：

$(function() {

function makeDisappear(idx) {                                                      
    return $('div[data-idx="'+idx+'"]').fadeOut(5000, function() {               
    }).promise();                                                                
}                         
$('.mydiv').click(function() {
    var tabResult = [1, 2, 3];
    var tabFadingOut=[];                                         
    for (var i=0; i<tabResult.length; i++) {                     
        tabFadingOut.push(makeDisappear(tabResult[i]));            
    }                                                            
    $.when.apply($, tabFadingOut).done(function() {              
        console.log('DONE');
    });                                                          
});

});

在这里工作：http://jsfiddle.net/ben1729/bcq3y9nv/1/

【讨论】：