JQuery Modal Window Troubleshoot

I use the following JQuery code to load iframed modal window. Almost everything works as expected. When the modal window is loaded for the first time, the window animation (slide down) is not working - the window just appears without any transition effect. After that, it works fine (slide down and up). If I navigate away from the page and load it again, the animation again does not work the first time. I c开发者_高级运维an't figure out why? Can you help?

Here is my code:

var md_done = false;
var md_height = 400;
var md_width = 400;

function md_show(caption, url, height, width) {
    md_height = height || 400;
    md_width = width || 400;
    if (!md_done) {
        $(document.body).append("<div id='md_overlay'></div><div id='md_window'><div id='md_caption'></div>" + "<div class='md_window' alt='close'></div></div>");
        $("#md_window .md_window").click(md_hide);
        $("#md_overlay").click(md_hide);
        $(window).resize(md_position);
        md_done = true;
    }

    $("#md_frame").remove();
    $("#md_window").append("<iframe id='md_frame' src='" + url + "' frameBorder='0' allowtransparency='true'></iframe>");

    $("#md_caption").html(caption);
    $("#md_overlay").fadeIn('slow');
    // scroll to top on show modal
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
    md_position();

    if (md_animation) $("#md_window").slideDown("slow");
    else $("#md_window").fadeIn('slow');
}

function md_hide() {
    $("#md_window").slideUp("slow");
    $("#md_overlay").fadeOut('slow');
}

function md_position() {
    var de = document.documentElement;
    var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
    $("#md_window").css({
        width: md_width + "px",
        height: md_height + "px",
        left: ((w - md_width) / 2) + "px"
    });
    $("#md_frame").css("height", md_height - 32 + "px");
}

Here is how I instantiate it:

<script type="text/javascript">
// DECLARE MODAL ANIMATION
var md_animation = true;
$(document).ready(function() {
    // MODAL - CONTACT FORM
    $("a.modal").click(function () {
        var x = this.title || $(this).text() || this.href;
        md_show(x, this.href, 450, 690);
        return false;
    });

});

Add display: none; to <div id='md_overlay'> and see if this still happens.