jquery - jQuery：在函数a完成后制作函数b

Question

我想知道在第一个功能完成后执行第二个功能的最佳方法是什么。

例如制作一个动画然后淡入另一个元素：

$('.btn').click(function () {   
$("#div1").animate({
    marginTop: - 100
    }, "slow");
    $("#div2").fadeIn();
});

这会在 Div2 中淡入淡出，同时它会为 div1 设置动画。有些人使用 delay() 但这不是一个很好的解决方案，因为某些浏览器的行为不同等。

你能建议一个好的解决方案吗？谢谢

Answer 1

animate ^[docs]接受第三个参数，一个在动画完成后执行的回调函数：

$("#div1").animate({marginTop: - 100}, "slow", funciton() {
    $("#div2").fadeIn();
});

Answer 2

您可以在 div1 的 animate 的完整函数中执行 div2.fadeIn()。

    $('.btn').click(function () {   
$("#div1").animate({
    marginTop: - 100
    }, "slow", function() {;
    $("#div2").fadeIn();});
});

Answer 3

您可以使用回调。一旦第一个函数返回，第二个函数就会启动。您可以根据需要链接任意数量的回调。

@felix-kling 在他的帖子中有一个例子

Answer 4

如果您使用像 animate 这样的内置函数，您可以利用它的回调函数（在动画完成后执行），如下所示：

$('#div1').animate({marginTop: -100}, "slow", function() {
    $('#div2').fadeIn();
});

如果您正在创建自己的功能；您可以像这样将回调函数传递给它：

function doSomething(param, fn){
    // Do something with function

    // Execute Callback Function //
    if (typeof fn == 'function') {
        fn.call(this); // Give Function Scope
    }
}

doSomemthing(
    param,
    function(){
        // Callback Function Goes Here
    }
)

我希望这有帮助！