Question

I’m using this code to hide a client’s page until it’s loaded:

<style type="text/css">

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #1984B5; z-index:9999;}

</style>

<script type="text/javascript">
window.onload = hide;
function hide(){
nav1=document.getElementById('cover').style
nav1.display='none';
}
</script>

But the transition is a little jarring with javascript hide. I’d like to use the jQuery fadeout, but it looks like they’ve redefined the jQuery $ as jQuery, and I’m not sure how to rewrite this so it works. I tried replacing $ with jQuery, but that didn’t work:

$("#cover").fadeOut(5000);

Answer 1

I do the same thing on my site. Here’s my code (essentially identical to yours):

<script src="Content/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('#cover').delay(2000).fadeOut('slow');
    });
</script>

I’ve got some other content loading dynamically via AJAX after the load as well, so the delay allows me to also give that enough time to render. But I agree with the other answer: make sure that your jQuery script is loaded first and be sure to put the fadeOut line in your $(document).ready() function.