Loading content + fading to does not work in IE, but does in FF and chrome ?!

Loading content + fading to does not work in IE, but does in FF and chrome ?!

Hi

At my page I use buttons, part of the div menu, to load content in an other div (contentArea) with jQuery.
When loading this content the text "Loading..." will appear in the loading div on the same page.
At the end of my index page, just before </body>, i use the following code;
  1. <script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript" src="menu.js"></script>
Menu.js:

  1. $(document).ready(function(){
        //References
        var sectionsvar = $("#menu span");
        var loadingvar = $("#loading");
        var contentvar = $("#contentArea");
                    contentvar.fadeTo(0, 0);
                    contentvar.load("content.php #home", hideLoading);
                    contentvar.slideDown();
                    contentvar.fadeTo(1500,1);
       
        //Manage click events
        sectionsvar.click(function(){
            //show the loading bar
            showLoading();
            //load selected section
            contentvar.fadeTo(1500, 0);
            switch(this.id){
                case "home":
                    contentvar.slideUp(400, function(){
                    contentvar.load("content.php #home", hideLoading);
                    contentvar.slideDown();
                    contentvar.fadeTo(1500,1)});
                    break;
                case "releases":
                    contentvar.slideUp(400, function(){
                    contentvar.load("content.php #releases", hideLoading);
                    contentvar.slideDown();
                    contentvar.fadeTo(1500,1)});
                    break;
                case "comingup":
                    contentvar.slideUp(400, function(){
                    contentvar.load("content.php #comingup", hideLoading)
                    contentvar.slideDown();
                    contentvar.fadeTo(1500,1)});
                    break;
                case "artists":
                    contentvar.slideUp(400, function(){
                    contentvar.load("content.php #artists", hideLoading)
                    contentvar.slideDown();
                    contentvar.fadeTo(1500,1)});
                    break;
                case "contact":
                    contentvar.slideUp(400, function(){
                    contentvar.load("content.php #contact", hideLoading)
                    contentvar.slideDown();
                    contentvar.fadeTo(1500,1)});
                    break;
                default:
                    //hide loading bar if there is no selected section
                    hideLoading();
                    break;
            };
                });

        //show loading bar
        function showLoading(){
            loadingvar
                .css({visibility:"visible"})
                .css({opacity:"1"})
                .css({display:"block"})
            ;
        }
        //hide loading bar
        function hideLoading(){
            loadingvar.fadeTo(1000, 0);
        };
    });

































































So when you click a button, this results in;
- fading out the content
- sliding up
- loading new content
- sliding down
- fading in the new content

This works perfectly in firefox and chrome, but i get nothing at IE. There is no content at all (div seems empty) and when i click a button nothing happens, except from "Loading..." fading in and fading out.

Anyone an idea to fix this?

Thanks in advance