Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    fading an image out with jquery

    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.

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.


    Code:
    <script src="jquery.js"></script>
    <script>
    <img id="book" src="logospining.gif" alt="" />
    
    
      $('#book').hide('slow', function() {
        alert('Animation complete.');
      });
    });
    </script>

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You might have to create the spinning animation itself with JavaScript.

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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:
    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.

  • #6
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    the animation filename is logospining.gif

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    i got it fixed i used javascript
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •