jQuery looping animation_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-17 11:31 出处：网络

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.

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)

Davi开发者_StackOverflowd

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.

"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.