fading an image out with jquery

[Repatilian]

hi i have an image actually an animated gif which i want to run through it's course then fade out. I think you can do that with jquery. someone was telling me to use a callback. i don't know how to use those. the image is logospining.gif. i want the image to load run it's animation then the rest of my page to load. i have all the html and css for the rest of the page. thank you. i looked on the jquery website but i've never used jquery before.

[Repatilian]

i think i could use the hide command too. I don't really know how to use it either. i tried to use this but it wouldn't display at all. i put this in the body.

<script src="jquery.js"></script>
<script>
<img id="book" src="logospining.gif" alt="" />


  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});
</script>

[DanInMa]

the problem with what you want to do si the factt hat javascript/jQ has no way of knowing when the gif has finished it's first animation loop.

- a callback function isnt really going to help you in this case becuase that basically does "something" once the hide function has been completed, not the animation sequence.

- also you appear to have put your html inside of the javascript block

questions
- when do you want the image to display?
- how long, exactly, is the animated gif's animation sequence?

[VIPStephan]

You might have to create the spinning animation itself with JavaScript.

[Repatilian]

Hi, i want a single animation to play threw at the beginning of my website then load everything else. Ok, here's what i want to use rollover buttons that actually have an animation when you mouse over the button then a different look when you click. I have all the code except for the animated button. I tried to use this code:

<a href="page.html" onmouseover="example.src='images/bt_rollover.jpg'" onmouseout="example.src='images/bt_normal.jpg'" onmousedown="example.src='images/bt_action.jpg'"><img src="images/bt_normal.jpg" alt="Image Alt text" name="example" width="100" height="100" border="0" /></a>

but when i added two buttons neither one would display. My website is at www.creationindex.com/indextest.html the rollover button is specified in the css but isn't set up to work. the two rollover files are profile.gif and profileover.gif. thank you.

[Repatilian]

the animation filename is logospining.gif

[Repatilian]

i got it fixed i used javascript

<a href="index.html"
><img src="profile.gif"  class="hide" border="0"
      onmouseover="this.src='profileani.gif';" onmouseout="this.src='profile.gif';"
></a>

and added an id.