Question

在我的jQuery插件中，我经常希望用户定义一些回调，如下面的简单示例所示

(function($) {
    $.fn.myplugin = function(options) {
        var s = $.extend({}, options),
            $this = $(this);

        if (typeof s['initCallback'] === 'function') {
            s['initCallback']($this);    
        }
        $this.animate({width: '+=300'}, 3000);   /* animation in plugin */
    }
})(jQuery);

有时定义的回调包含这样的同步代码，这段代码可以正常运行

$('#mydiv').myplugin({
    initCallback : function(mydiv) {
       $('<div>This is synchronous, so it will entirely executed before animation</div>')
           .insertBefore(mydiv);
    }   
});

但在其他一些情况下，回调可以定义像这样的异步动画

$('#mydiv').myplugin({
    initCallback : function(mydiv) {
       $('<div>animations are not synchronous here</div>')
           .insertBefore(mydiv)
           .hide()
           .fadeIn(4000); /* animation in callback */
    }   
});

在最后一种情况下，我们有两个明显重叠的动画，因为在执行initCallback()之后，剩余的插件代码在fadeIn()回调上没有正确执行。

所以我问：它是否存在一个常见的jQuery模式来处理这两种代码（异步/同步）以确保initCallback()将终止执行，无论代码是什么定义？或者我是否需要以两种不同的方式对案例进行编码？

此示例的代码可在http://jsfiddle.net/fcalderan/LKttT/

上找到

提前致谢。

Answer 1

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

.animate（属性，选项）

properties一个CSS属性的地图   动画将走向。

optionsA附加选项的映射   传递给方法。支持的密钥：


duration：确定动画时长的字符串或数字   会跑。

easing：一个字符串，指示要使用的缓动函数   过渡。

complete：动画完成后调用的函数。

步骤：在动画的每个步骤之后调用的函数。

queue：一个布尔值，指示是否将动画放入   效果队列。如果为false，则为动画   将立即开始。

specialEasing：由一个或多个CSS属性定义的地图   属性参数和它们的   相应的宽松功能（补充说明）   1.4）。

您应将队列设置为 false 。

带有同步动画的Jquery回调

1 个答案: