Question

在我的学习中，我总是在jQuery中学习和理解回调：

在当前动画（效果）结束后执行回调函数。

[...]使用动画，即使动画未完成，也可以运行下一行代码。这可能会造成错误。   为防止这种情况，您可以创建回调函数。直到动画结束后才会调用回调函数。    ^{引用：www.w3schools.com[...]}

和

回调是一个函数，它作为参数传递给另一个函数，并在其父函数完成后执行。 ^{引用：www.jquery.com[...]}

但我的回调使用因某种原因无效。

请查看以下代码：

$(page).slideUp("slow", function() {

    $('div#details').html(details);
    $(page).slideDown("slow");              

});

这应该使内容框向上滑动并因此消失，然后将内容更改为新内容，最后内容框再次向下滑动（显示）。我需要这三个步骤按此顺序相继发生，但每个步骤必须仅在前一个步骤完成时开始。这就是为什么我使用回调而不仅仅是这个：

$(page).slideUp("slow");

$('div#details').html(details);

$(page).slideDown("slow");

这将使一切都在同一时间发生。

我的代码有效，只需点击一下按钮即可转移页面内容。但动画并没有像我预期的那样做出反应。单击该按钮时，内容会立即消失，而不会显示任何动画幻灯片。然后新内容以精美的动画播放幻灯片。

我不明白为什么没有动画幻灯片，但我怀疑回调不像我想的那样。看起来回调在第一个动画开始时触发，而不是在动画结束之前等待触发。或者也许只是幻灯片根本不起作用？

任何人都可以向我解释一下，我不知道并且在这个非常简单的代码中没有看到包括回调的内容吗？

Answer 1

您可以使用延迟功能作为解决方法。

$(page).slideUp(500);
$('div#details').html(details);
$(page).delay(500).slideDown(500);

Answer 2

将slideDown放入回调

$(page).slideUp("slow", function() {

    $('div#details').html(details);
    $(page).slideDown("slow");
});

您之前的代码仅在完成slideUp后更新div #details。