How to fire a function before and after automatically in a jquery plugin?

How should I implement beforeAnimate and afterAnimate callbacks in the following jQuery plugin?

• Let's assume this is my plugin: // 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); } }); How should I rewrite this part: options.beforeAnimate(); $(this).animate({'width':'1000px'},1000); options.afterAnimate(); In order to get the 3 animate calls one after other. (i.e waiting for the previous one has finished)

• Answer:

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