Question

我想编写一些代码，允许我将jQuery的animate函数替换为执行不同功能的函数，但仍允许我在完成时调用辅助函数。

目前，我正在写这么多代码;

if (cssTransitions) {
   $("#content_box").css("height",0);

   window.setTimeout(function() {
       secondFunction(); 
   }, 600);
} else {
    $("#content_box").animate({
        height:0
    }, 600, function() {                
        secondFunction();
    });
}

我宁愿写一个看起来像这样的函数：

function slideUpContent(object) {
    if (cssTransitions) {
         object.css("height",0);
         // Not sure how I get a callback here
    } else {
        $("#content_box").animate({
            height:0
        }, 600, function() {
        });
    }
}

我可以这样使用：

slideUpContent("#content_box", function(){
    secondFunction();
});

但我不确定如何获得我需要的功能 - 一种在我的完成后运行另一个功能的方法。

任何人都可以帮助我的大脑吗？

Answer 1

您正在寻找的功能称为回调。

实施起来很简单。只需将匿名函数（或其他函数）作为参数传递，然后通过附加括号callback()调用传入的变量（显然先检查它是否是有效函数）。

function slideUpContent(object, callback) {
    if (cssTransitions) {
         object.css("height",0);
         // Perform callback if set
         if ($.isFunction(callback)) {
             callback();
         }
    } else {
        $("#content_box").animate({
            height:0
        }, 600, callback);
    }
}

Answer 2

链接通常意味着返回这个以便你可以做到

$("selector").function1().function2();

对于您的示例，您只需要

function1(param1, f) {
    // do stuff
    f();
 }

然后用

调用它

function1("parameter", function2);

Answer 3

我最近为网站创建了一个序列开放动画。我发现这个网站是一个很好的信息来源。可能对您有帮助的部分是标题为“创建一系列动画”的部分。

http://www.elated.com/articles/super-easy-animated-effects-with-jquery/

编写允许链接的jQuery函数

3 个答案: