What determines the execution order of methods in jQuery chains?

javascript, jquery, method-chaining

Solution

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

Problem

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 - hide the `p` element in `#foo` - append `p` to `#bar` - show `p` which is now a child of `#bar` Actual Result - append `p` to `#bar` - hide the `p` element in `#foo` - 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?

Original source