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

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

如何在我自己的jQuery插件中实现beforeAnimte和afterAnimate回调？

1 个答案: