Question

如果我有一个div，我清除了内容，但是然后想要在它的位置添加一些新内容，我怎样才能将这些函数串起来，以便只在前一个完成之后触发

$('#nner_container').fadeOut(300, function(){

    $('#header_div').after('<div id="inner_container" style="dispay:none"></div>');
       //when this insertion of inner_container completes, fill it with some content
       //and when that completes, fadeIn inner_container

});

大多数jquery函数似乎都将其他函数作为最终参数，我认为这些函数恰好用于此目的。但after()并非如此。或者我做错了什么。

由于

Answer 1

添加新div后，只需淡入inner_container：

$('#inner_container').fadeOut(300, function(){

    $('#header_div').after('<div id="inner_container" style="dispay:none"></div>');
    $('#inner_container').fadeIn(300);
});

after函数是同步的，这意味着在前一个语句完成之前，下一个语句不会执行。

另一方面，fadeOut和fadeIn异步执行，这意味着下一个语句可以在效果完成之前执行。这就是fadeOut和fadeIn函数在效果完成时需要执行回调的原因。

Answer 2

如果您要替换内容

，请尝试使用.replaceWith（）函数

Answer 3

由于.after立即完成，因此不需要（或拥有）回调，您可以通过在下一行放下您想要做的事情来链接它;

$('#inner_container').fadeOut(300, function(){    
    $('#header_div').after('<div id="inner_container" style="dispay:none"></div>');
    $('#inner_container').fadeIn(300);
});

异步方法通常是需要一段时间的方法，例如FadeIn和FadeOut，需要一定的时间才能完成。大多数（如果不是所有）不是动画的DOM操作函数实际上是同步的，并且可以编码为经典代码而不需要回调。

我如何链接这些功能，以便一旦完成，下一次激活？

3 个答案: