Question

HTML Code

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

jQuery Code

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

Expected Result

When #bar is clicked

1. hide the p element in #foo
2. append p to #bar
3. show p which is now a child of #bar

Actual Result

1. append p to #bar
2. hide the p element in #foo
3. show p which is now a child of #bar

Questions

• What determines the execution order of methods in jQuery chains?
• How can I ensure that each event completes before the next starts?

Answer 1

If you want to wait until each animation completes before doing the next step, use the animation callbacks detailed in the documentation:

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