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的动画完整功能中执行div2.fadeIn（）。

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

Answer 3

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

@ felix-kling在his post

中有一个例子

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

我希望这有帮助！

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

4 个答案: