【问题标题】:Pass jQuery to .animate Callback将 jQuery 传递给 .animate 回调
【发布时间】:2013-04-21 01:05:04
【问题描述】:

我已经设置了一个简单的动画方法,如下所示:

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);

进入回调?

谢谢!

【问题讨论】:

  • 打电话completeFunction()?
  • 我将使用这个函数在不同的元素上调用不同的动画。所以 Plugin.Animator(element,{'opacity':0.5}, 500, {'opacity':'linear'}, " .... ") ... 是回调信息(如 $('# someElement').hide(500) 需要离开。我不确定我是否通过调用 completeFunction() 来关注你?
  • Animator 怎么叫

标签: javascript jquery callback jquery-animate


【解决方案1】:

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

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,因为这将同时测试null 和undefined 并以相同的方式对待它们。但实际上,您根本不需要这个显式测试,如果您要检查的唯一内容是调用者是否提供了 completeFunction 回调。

【讨论】:

  • 完美!非常感谢,它也很好地保持了可读性:)
  • 太棒了!乐意效劳。此外,我刚刚在答案中添加了一些更相关的注释。
  • @orb - 不用担心,这发生在我们最好的人身上。就在昨晚,我发布了一个完全错误的简单 jQuery 调用!幸运的是,关于那个问题的 OP 发现了我的错误,并且对此也很客气。 :-)
【解决方案2】:

试试

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;
},

Theb

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-05-05
    • 2012-06-19
    • 2010-11-01
    • 1970-01-01
    • 2015-12-16
    • 2016-02-27
    • 2018-04-07
    • 1970-01-01
    相关资源
    最近更新 更多