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

Question

一旦promise 是.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 中的divs，而不是.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();
    });
}