Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jquery image expand/shrink on hover

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33854
    gromfy
    Member

    I found a great jquery script to have an image expand on hover and shrink to original size on mouseout:
    http://stackoverflow.com/questions/883448/is-there-a-way-to-grow-shrink-an-image-on-hover-using-jquery/6619958#6619958

    Here is a test fiddle: http://jsfiddle.net/3t7j2/5/

    It works well. BUT, if you mouseout quickly and then back on, the image “resting size” expands past its original size. It will keep growing indefinitely. I tried to add stop parameters, but that didn’t help. Any suggestions on how to prevent the growth appreciated….

    #84870
    gromfy
    Member

    I’m not sure if it’s appropriate protocol to bump this. Hopefully no one minds. I feel like I must be missing some simple fix….

    #84874
    shagzdesign
    Member
    #84875
    shagzdesign
    Member

    Sorry for the double post, just make sure that you change the name of the ul to what you have it named in your code, in my example it’s ul.gallery li, yours will obviously be different and I didn’t make the comment in my code example. My example is a little different from the one you posted because it has options set to center the image, and it gives the image a higher z-index so that it wont push content out of the way when you hover it. But this should work well for your purposes I hope. Let me know if you have any questions.

    #84879
    Mottie
    Member

    Here is a really great tutorial to check over.

    But I still modified your demo – basically save the width and height of the image outside of the hover function

    var current_h = $('img').height();
    var current_w = $('img').width();

    $('.resize').hover(

    function() {
    $(this).stop(true, false).animate({
    width: (current_w * 1.3),
    height: (current_h * 1.3)
    }, 300);
    }, function() {
    $(this).stop(true, false).animate({
    width: current_w + 'px',
    height: current_h + 'px'
    }, 300);
    });
    #84881
    gromfy
    Member

    Thank you both for the help and information. Two very different and interesting approaches.

    Here it is implemented in my dev site (the title):
    http://dev.aintyomamasblog.com/

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.