jQuery：在函数a完成后创建函数b

Question

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

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

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

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

您能为此提出一个好的解决方案吗？谢谢

Answer 1

如果您使用像 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
    }
)

我希望这有帮助！

Answer 2

动画 ^[文档]< /a> 接受第三个参数，即动画完成后执行的回调函数：

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

Answer 3

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

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

Answer 4

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

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