[jQuery] how to fade in image after the site loads?
I am working making an intro page to a photo site and I need the image
to fade in slowly after the site finishes loading.
I believe I have the jquery correct but something is obviously wrong.
Right the now the image is hidden, but it wont fadeIn. I am also
trying to get the text "Please wait for site to load to slowly fadeOut
during this, then after all thats done, fadeIn the "Enter Site" text.
Here is the code I am using for it. So far only a few things are
working properly.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/
jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span").ready(function(){
$(this).removeClass("pic"){
$(this).fadeIn(4000);
}
},
function() {
$("div").fadeOut(6000);
},
function() {
$("a#site").removeClass("site");
$(this).fadeIn(1000);
});
});
</script>
<style type="text/css">
a.site {display: none}
span.pic {display: none}
table.position {position: center}
div.position {text-align: center}
</style>
</head>
<body>
<table border="1" class="position">
<tr>
<td>
<span id="photo" class="pic">
<img src="/test/land_scape_5.png"
</span>
</td>
</tr>
<tr>
<td>
<div class="position">Please wait for site to load</div>
<a href="#" class="site" id="site" style="text-align: right">Enter
Site</a>
</td>
</tr>
</table>
Here is the link to the page to see whats it giving me:
http://royalvillicus.com/test/photo.html
I appreciate all the help