是什么决定了jQuery链中方法的执行顺序？

Question

HTML代码

<div id="foo">
    <h1>foo</h1>
    <p>Pellentesque habitant morbi tristique.</p>
</div>
<div id="bar">
    <h1>bar</h1>
</div>

jQuery代码

$('#bar').click(function () {
    $('#foo p').hide('slow').appendTo('#bar').show('slow');
})

预期结果

单击#bar时

1. 隐藏p元素#foo
2. 附加p到#bar
3. 显示p哪个现在是孩子的#bar

实际结果

1. 附加p到#bar
2. 隐藏p元素#foo
3. 显示p哪个现在是孩子的#bar

问题

• 是什么决定了jQuery链中方法的执行顺序？
• 如何确保每个事件在下次启动之前完成？

Answer 1

为确保您在隐藏或显示等效果后执行某些操作,请使用回调. http://docs.jquery.com/Effects/show#speedcallback

加上:

文森特是对的,实际上是执行

1. 开始隐藏#foo中的p元素(SLOWLY)
2. 将p附加到#bar(快照)
3. 开始显示p现在是#bar的孩子(慢)

你看到的是效果的结果

1. 将p附加到#bar(已执行)
2. 隐藏#foo中的p元素(COMPLETED)
3. show p现在是#bar(COMPLETED)的孩子

Answer 2

如果您想等到每个动画完成后再执行下一步，请使用文档中详细介绍的动画回调：

$('#bar').click(function () {
  $('#foo p').hide('slow', function(){
    $(this).appendTo('#bar').show('slow');
  });
});