jQuery order of execution - appended information before animation
<p>I have a curious problem in jQuery regarding order of execution. The code below works pretty much as designed, but the closeButton div that is appended at the end, after all the animations and overflow protection removal, appears before the animations.</p>

<p>What causes this behaviour, and what's the best way to deal with it?</p>

<pre><code>        $('.infoRight .hoverIcon').click(
            function(){
                $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off
                $(this).parent()
                    .clone(false)//create a copy of the item
                    .addClass('expandinator')//give appropriate classes to ensure appropriate styling
                    .addClass('expandinatorright')
                    .appendTo($(this).parent());//place clone in its parent.
                $('.expandinatorright').animate({//change to colour for expanded info
                    backgroundColor: "#FFFFFF",
                    color: "#124191"
                }, 300 , function() {
                    $('.expandinatorright').animate({//biggify
                        width: "510px"
                    }, 150, function() {
                        $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection
                        $('&lt;div class="closeButton"&gt;&lt;/div&gt;').appendTo('.expandinatorright');//add a close button
                    });
                });
            }
        );
</code></pre>
