jQuery animate an image up and down on hover

[grantSenior]

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

[Paulie_D]

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

[grantSenior]

Thanks for your suggestion Paulie_D, it’s not something I considered but you may be right. I will look into it.

[grantSenior]

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

[grantSenior]

I 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); });

[Taufik Nurrohman]

You 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");

});

Demo: http://jsfiddle.net/tovic/2RqmU/99/

[Chris Coyier]

So… without jQuery, a little hover that moves an image up can be easily done in CSS. Here’s a barebones example:

http://codepen.io/chriscoyier/pen/vDBCI

[Author]

Posts