Grow your CSS skills. Land your dream job.

jQuery animate an image up and down on hover

  • # December 9, 2012 at 7:11 am

    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

    # December 9, 2012 at 8:49 am

    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.

    # December 9, 2012 at 3:52 pm

    Thanks 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

    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.

    # December 9, 2012 at 6:14 pm

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

    # December 10, 2012 at 5:16 am

    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/

    # December 10, 2012 at 2:05 pm

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".