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)
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.
加载中,请稍侯......
精彩评论