fill html marquee from sql db using jquery

[admin]

I have a few wordpress pages that contain a scrolling html marquee. When the page is loaded, an ajax call is used to fetch content from sql db, then fills the marquee. Everything works, but when you navigate to the page, the marquee reaches the top, then starts over. If you refresh page, everything works as expected. It's just when the page is first navigated to where issue happens.

Any advice? It's almost like the marquee starts before all the content is retrieved, and inserted into the tag??

wordpress html:

<script type='text/javascript' src='/scripts/dialog/js/jquery-ui-1.8.18.custom.min.js'> </script>
<script type='text/javascript' src='/scripts/dialog/js/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='/scripts/dialog/popupDialog.js'></script>

<div id="emptyMarquee" class="emptyMarquee-tall"></div>

<marquee class="marquee-tall" name="Compliance" direction="up" behavior="scroll" scrollamount="3">
    <center>
    </center>
</marquee>

popupDialog.js

$(function(){
//hide the empty marquee and the marquee wrapper
$("#emptyMarquee").hide();
$("#marquee").hide();

//get projects from server
var serviceArea = $("#marquee").attr("name");
var query = "serviceArea=" + serviceArea;
$.ajax({
    type: "GET",
    url: "/scripts/dialog/getMarqueeData.php",
    data: query,
    dataType: "json",
    success: function(returnData){
        if (!(returnData.aaData[0] == "none")){//atleast 1 project returned from db                                

            $("#emptyMarquee").hide();

            //create marquee element
            $("#marquee").html("<marquee class='marquee-tall' direction='up' behavior='scroll' scrollamount='3'><center></center></marquee>");

            var projArr = [];

            for (var i = 0; i < returnData.aaData.length; i++) {            
                //returnData.aaData[i][0] - name
                //returnData.aaData[i][1] - description
                projArr.push("<strong>" + returnData.aaData[i][0] + "</strong> - " + returnData.aaData[i][1] + "</br></br>");
            };
            $.each(projArr,function(index, value){
                $("marquee center").append(value);
            })
            $("#marquee").show();
        }
        else{//no projects returned from db, show emptyMarquee div, fill with msg
            $("#marquee").hide();
            $("#emptyMarquee").html("Please check back soon for updated " + serviceArea + " projects.");
            $("#emptyMarquee").show();
        }
    }
})
});