如何在我自己的jQuery插件中實現beforeAnimte和afterAnimate回調？

Question

假設這是我的插件：

// writing the plugin 
    (function($){ 
     $.fn.myPlugIn = function(options){ 
      defaults = { 
       beforeAnimate : function(){}, 
       afterAnimate : function(){} 
      } 
      options = $.extend(defaults, options); 

      //here is where I need help 
      options.beforeAnimate(); 
      $(this).animate({'width':'1000px'},1000); 
      options.afterAnimate(); 
     } 
    })(jQuery); 

    //using the plugin 
    $('#art2').myPlugIn({ 
     beforeAnimate: function(){ 
      $('#art1').animate({'width':'1000px'},1000); 
     }, 
     afterAnimate: function(){ 
      $('#art3').animate({'width':'1000px'},1000); 
     } 
    }); 

我應該如何改寫這個部分：

  options.beforeAnimate(); 
      $(this).animate({'width':'1000px'},1000); 
      options.afterAnimate(); 

爲了得到3動畫調用另一個之後。 （即等待前一個已完成）

Answer 1

從jQuery的：

功能齊全

如果提供，一旦動畫完成完整的回調函數被觸發。 這可以用於將不同的動畫按順序排列在一起。回調沒有發送任何參數，但是這被設置爲正在動畫的DOM元素。如果多個元素都是動畫的，則每個匹配元素執行一次回調，而不是整個動畫。