CODEWITHSUNDEEP
javascriptjquery
StealthRT
StealthRT

Reputation: 10552

jQuery looping animation

Hey all i am trying to get my code below to work in order for the "bug', when the mouse is moved over it, to animate like it's flying a little bit.

Here is my current code:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){

var navDuration = 150; //time in miliseconds
  var navJumpHeight = "0.45em";

  $('#bug1').hover(function() {
      $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
  }, function() {
      $(this).animate({ top : "15px" }, navDuration);
  });

  });
  </script>
  <body>
  <a href="google.com"><img src="images/bug_05.png" width="90" height="73" id="bug1" /></a>
  </body>

The code above does not seem to move the image at all. I'm trying to make an effect that loops like the bug is flying (hovering) a little when the user places their mouse over it.

Any help would be great! :o)

David

Upvotes: 0

Views: 393

Answers (2)

Lo&#239;c F&#233;vrier
Lo&#239;c F&#233;vrier

Reputation: 7750

"Top" can only work with position relative/absolute.

<img src="images/bug_05.png" width="90" height="73" id="bug1" 
   style="position:relative"/>

EDIT : As pointed by Nick Craver, absolute will be used rarely, most of the time in image is somewhere in a div and you want relative position to that div, no absolute position in the page.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630597

For the top style to have any effect you need to position the element, in this case position: relative, like this:

​#bug1 { position: relative; }​

You can see it working here. You may want 0px instead of 15px in your mouseleave animation as well, so it resets to it's original position, like this.

Upvotes: 2

Related Questions