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要素そのものを.gridにdiv sのアニメーションを追加しているので、あなたはそれらの上.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(); 
    }); 
}