0

在我的 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/上获得

提前致谢。

4

1 回答 1

1

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

.animate（属性，选项）

propertiesA 动画将向其移动的 CSS 属性的映射。

options 传递给方法的附加选项的映射。支持的键：

  • 持续时间：确定动画将运行多长时间的字符串或数字。
  • easing：一个字符串，指示用于过渡的缓动函数。
  • 完成：动画完成后调用的函数。
  • step：动画的每一步之后要调用的函数。
  • queue：一个布尔值，指示是否将动画放入效果队列。如果为 false，动画将立即开始。
  • specialEasing：由 properties 参数定义的一个或多个 CSS 属性及其相应的缓动函数的映射（添加 1.4）。

您应该将queue设置为false。

于 2010-11-12T09:39:52.277 回答