Home › Forums › JavaScript › jQuery animate an image up and down on hover
- This topic is empty.
-
AuthorPosts
-
December 9, 2012 at 7:11 am #41240grantSeniorParticipant
Hello, can I get some help with some jQuery please? I’m new to jQuery and am having some difficulty getting the result I’m after.
I have an image in a div that I would like to animate on hovering over it as in this example. http://thewebsitedeveloper.co.nz/thinkRedTest/pattonNz/optionOne.html This works fine but I would prefer that the image didn’t bounce continually. I would just like the image to animate up and stay in a raised position until the mouse leaves the hover.
This is the script that’s animating it at present.
$(‘.gHover’).hover(function () {
$(this).effect(“bounce”, { distance: 3, times:1 }, 900);
});I’ve found this fiddle, which is pretty much what I’m after but in reverse, but haven’t been able to get it to work with my example. http://jsfiddle.net/2RqmU/4/
Any help greatly appreciated.
Thanks.
GrantDecember 9, 2012 at 8:49 am #116590Paulie_DMemberThis seems like a very complicated method of something that could easily be achieved using css positioning and transitions.
…but perhaps the site needs deeper browser support.
December 9, 2012 at 3:52 pm #116603grantSeniorParticipantThanks for your suggestion Paulie_D, it’s not something I considered but you may be right. I will look into it.
December 9, 2012 at 5:07 pm #116616grantSeniorParticipantI don’t think that will solve my problem after all, from what I’ve seen so far the results are not consistent across all browsers. So I’m back to trying to get a solution with jQuery.
Thanks for the suggestion anyway.
December 9, 2012 at 6:14 pm #116572grantSeniorParticipantI found a few approaches got me what I wanted.
The .animate approach raises the image and holds until the mouse leaves the div
$(document).ready(function(){
$(“.boxx”).mouseover(function(){$(this).stop().animate({bottom:’5px’},”fast”); //raised the div class=”.boxx” with image
});
$(“.boxx”).mouseout(function(){
$(this).stop().animate({bottom:’0px’},”fast”); //lowers the div class=”.boxx” with image
});
});BUT, by replacing .hover with .mouseenter. I now have the animation stopping completely once the mouse leaves the div which is also desirable.
$(‘.imgHover’).mouseenter(function () { $(this).effect(“bounce”, { distance: 3, times:1 }, 900); });
December 10, 2012 at 5:16 am #116731Taufik NurrohmanParticipantYou need two direct functions in the
.hover()
event:$('div').hover(fn1, fn2);
For the bouncing effect, you can use
easeOutBounce
easing. You don’t even need a JQuery UI for this:$('.gHover').hover(function() {
$(this).stop().animate({
top: -50
}, 900, "easeOutBounce");
}, function() {
$(this).stop().animate({
top: 0
}, 900, "easeOutBounce");
});December 10, 2012 at 2:05 pm #116764Chris CoyierKeymasterSo… without jQuery, a little hover that moves an image up can be easily done in CSS. Here’s a barebones example:
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.