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

Question

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

到目前为止我所做的是 "click" 事件中的一个循环：

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() 并且它不起作用。我希望 'DONE' 出现在控制台日志中...知道如何解决这个问题吗？

Answer 1

你的代码对我来说似乎工作正常。请查看工作 fiddle:

$(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');
    });                                                          
});

});

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

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

Deferred animation in array: how to?

jquery

fade

promise

deferred