jQuery在.promise()之后循环一个函数

Question

我试图循环一个函数一旦承诺是。done()。我好像漏掉了什么。有什么建议吗?

我想让这个在函数中运行，当最后一个动画完成时，再做一次。

我在这里包含了所有的JS，包括支持函数。

(function($) {
  $.fn.shuffle = function() {
    // credits: http://bost.ocks.org/mike/shuffle/
    var m = this.length, t, i;
    while (m) {
      i = Math.floor(Math.random() * m--);
      t = this[m];
      this[m] = this[i];
      this[i] = t;
    }
    return this;
  };
}(jQuery));
jQuery.noConflict();
jQuery(document).ready(function($) {
    $.fn.queueAddClass = function(className) {
        this.queue('fx', function(next) {
            $(this).addClass(className);
            next();
        });
        return this;
    };
    $.fn.animateGrid = function() {
        $('.grid').shuffle().each(function(index) {
            $(this).delay(100 * index).queueAddClass('zoom-down');
            $('div', this).delay(100 * index).animate({opacity:0.85}, 100);
        });
        $('.grid').promise().done( function(){
            $('.grid').animate({opacity:0}, 2000);
            $('#mosaic').animateGrid();
        });
    }
    $('#mosaic').animateGrid();
});

Answer 1

你只是在.grid中添加动画到div，而不是.grid元素本身，所以当你调用.promise时，它不会有任何队列等待。不如用

$.fn.animateGrid = function() {
    var self = this;
    this.find('.grid').shuffle().each(function(index) {
        $(this).delay(100 * index).queueAddClass('zoom-down');
        $('div', this).delay(100 * index).animate({opacity:0.85}, 100);
    });
    this.find('.grid div').promise().done( function(){
        $('.grid').animate({opacity:0}, 2000);
        self.animateGrid();
    });
}