Home/ Questions/Q 1095455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:07:39+00:00

Hey all i am trying to get my code below to work in order

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0