jQuery-ui breaks animation

Question

I have a div that has some animation in it, and when I add in the jquery-ui, the animation event does not fire. If I comment out the lines that enable jQuery-UI, everything works fine (except the ui functions of course). Here is a snippet of the code I'm having issues with.

    <script type="text/javascript">
        $(document).ready(function() {
    $("#content").children().hide();
    $("#Home").show();

    $("#pagenav ul li").click(function() {
    $("nav ul li").removeClass("selected");
    $(this).addClass("selected");
    $("#content").children().hide();
    $("#" + $(this).data("name")).show();
    });
    $("#myImageBox ul li").hide(function() {
    $("#myImageBox ul li").each(function(index) {
        $(this).delay(1000*index).fadeIn(500);
    });
    });
    $("#accordion").accordion({ header: "h3" });
    });
 </script>

Any idea as to why this would cause issues? Thanks for any advice.

Edit: here is the code I'm using to call the scripts/css etc.

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="layout.css">
    <link rel="stylesheet" type="text/css" href="css/south-street/jquery-ui-1.8.20.custom.css">

Answer 1

I haven't looked too closely, but problems can be caused by loading CSS after the JS.

Try changing the load order so that the css is call first, and load the jQuery.UI Css before your stylesheet, so your stylesheet can make the modifications needed.