将jQuery传递给.animate Callback

时间:2013-04-21 01:05:04

标签: javascript jquery callback jquery-animate

我设置了一个简单的动画师方法:

Animator: function (obj, aniArgs, duration, aniEasArgs, completeFunction) {
    obj.stop(true, true).animate(aniArgs, {
        duration: duration,
        queue: false,
        specialEasing: aniEasArgs,
        complete: function () {
            if (completeFunction !== null) {

            };
        }
    });
    return obj;
},

我想做的是能够传递jQuery字符串以在完整的回调中运行。其他一切都很好。例如,我将如何传入

$('#someElement').hide(500);

进入回调?

谢谢!

2 个答案:

答案 0 :(得分:4)

首先,使用您要运行的代码创建一个函数:

function complete() {
    $('#someElement').hide(500);
}

然后,在调用Animator时传递该函数:

Animator( obj, aniArgs, duration, aniEasArgs, complete );

或者,您可以将函数内联:

Animator( obj, aniArgs, duration, aniEasArgs, function() {
    $('#someElement').hide(500);
});

这些都以相同的方式工作,您可以使用任何一种样式,具体取决于使代码更易于阅读的内容。

无论哪种方式,都可以将Animator代码更改为:

        if( completeFunction ) {
            completeFunction();
        };

或者,你会经常看到这样写的:

        completeFunction && completeFunction();

他们都完全一样。这只是你使用的味道问题,我想我会提到两种变化,所以当你看到它们时你会认出它们。

请注意,此处不需要!== null测试,实际上并不是您想要的。这是因为如果调用者未传入completeFunction,则该变量的值将为undefined,而不是null,因此您的测试将无效。有趣的是,在这种情况下,您可以使用!= null,因为这会测试nullundefined,并对它们进行同样的处理。但实际上你根本不需要这个明确的测试,如果你唯一要检查的是调用者是否提供了completeFunction回调。

答案 1 :(得分:0)

尝试

Animator: function (obj, aniArgs, duration, aniEasArgs, completeFunction) {
    obj.stop(true, true).animate(aniArgs, {
        duration: duration,
        queue: false,
        specialEasing: aniEasArgs,
        complete: function () {
            if (jQuery.isFunction(completeFunction )) {
                completeFunction.apply(this, arguments);
            };
        }
    });
    return obj;
},

然后

x.Animator(obj, aniArgs, duration, aniEasArgs, function(){
    $('#someElement').hide(500);
})