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

【问题标题】：How to implement beforeAnimte and afterAnimate callbacks in my own jQuery plugin?如何在我自己的 jQuery 插件中实现 beforeAnimte 和 afterAnimate 回调？
【发布时间】：2011-07-08 22:38:52
【问题描述】：

假设这是我的插件：

    // 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 个动画调用。（即等待前一个完成）

【问题讨论】：

标签： javascript jquery jquery-plugins callback closures

【解决方案1】：

来自 jQuery：

功能齐全

如果提供，则在动画完成后触发完整的回调函数。 这对于将不同的动画按顺序串起来很有用。回调没有发送任何参数，但它被设置为动画的 DOM 元素。如果为多个元素设置动画，则每个匹配元素执行一次回调，而不是对整个动画执行一次。

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

【讨论】：