fadeout time slipping jquery
<p>I've been having a bit of trouble getting the following fadeout code to work as i'd like. </p>

<p>Both temporary divs ($tempBackgroundTop, $tempBackground) should fadeout at the same time but one is fading out at just before the other.</p>

<p>Any ideas?</p>

<p>Cheers!</p>

<pre><code>jQuery(document).ready(function () {

    jQuery("a.trigger").click(function (event) {
        event.preventDefault();

        var speed = 1e3,
            $body = jQuery("body"),
            $background = jQuery("#background"),
            $page = jQuery("#page"),
            $tempBackgroundTop = jQuery("&lt;div/&gt;").attr("id", "tempBackgroundTop").addClass("blueTop"),
            $tempBackground = jQuery("&lt;div/&gt;").attr("id", "tempBackground").addClass("blue");

        $page.after($tempBackgroundTop).after($tempBackground);
        $body.removeClass("blue").addClass("turquoise");
        $background.removeClass("blueTop").addClass("turquoiseTop");

        jQuery.when($tempBackgroundTop.fadeOut(speed), $tempBackground.fadeOut(speed)).done(function () {

            $tempBackgroundTop.remove();
            $tempBackground.remove();

        });
    });
});
</code></pre>
