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

Вы только добавлять анимацию к div с в .grid а не .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(); 
    }); 
}