How to implement beforeAnimte and afterAnimate callbacks in my own jQuery plugin?

Question

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. (ie waiting for the previous one has finished)

Answer 1

From jQuery:

Complete Function

If supplied, the complete callback function is fired once the animation is complete. This can be useful for stringing different animations together in sequence . The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.

http://api.jquery.com/animate/