Hi,
Try something like this:
$('#photo img').load(function() {
$('.pic').fadeIn();
$('div.position').fadeOut();
$('.site').fadeIn();
});
The .load() event should fire when the images has loaded.
You don't need to remove the classes "pic" and "site" to get the fades
in/out to work.
Paul
On Feb 11, 11:17 pm, surreal5335 <surrea...@hotmail.com> wrote:
> 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
