The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Have multiple divs with same class animate on hover JQUERY

  • Anonymous
    # June 5, 2013 at 7:33 am

    I’ve asked this question before and got a pretty good solution. I’m not a jquery wiz and am not sure how to do it this way.

    I want each of the divs of .team_member_card_info to slide up individually and not all at onece depending on which one you are hovering over.

    # June 5, 2013 at 7:44 am

    Explain the last part. Depending on which you are hovering. Like a wave sort of thing? Do you want the one that’s hovered slide up as well?

    # June 5, 2013 at 8:17 am

    @CrocoDillon i want the .team_member_info to slide up when hovering over the .team_member_info_card. This is what i want to achieve go to about us and you can see at the bottom of that page each member div has an inner div that slides up when hovering over it. But i want that to be done with the code in this pen

    # June 5, 2013 at 8:25 am

    Like this?
    []( “”)

    I solved it by using css transition, you can delete it and use the javascript instead… that shoud work too. :)

    # June 5, 2013 at 8:39 am

    @adahei that works but there’s a small problem with it while using the javascript. If you move the cursor allot while it’s sliding up the animation slightly stops. And if i remove .stop() it doesn’t slide down when mouseleave. And i forgot to mention i don’t want to use CSS because of browser compatibility.

    # June 5, 2013 at 8:49 am

    I replaced .mouseover() to .mouseenter() and I think it works now.

    # June 5, 2013 at 8:51 am

    @adahei definitely works. Thank you.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed