如何在我自己的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元素。如果多个元素都是动画的，则每个匹配元素执行一次回调，而不是整个动画。