Question

113

How can I make this div slide up and down hover effect?

rated 0 times [ 120] [ 7] / answers: 1 / hits: 18974 / 13 Years ago, sun, february 12, 2012, 12:00:00

I want to create a <div> animation very much like this site: http://www.weareinstrument.com/about/. When you hover over the darker grey boxes and the images at the bottom of the screen they seem to slide up and down depending if you're hovering them. I can't seem to find the jQuery in the source code for it. Can anyone inform me on how it would be done?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tristab

Add To Favorites

Follow

Total Points: 735

Total Questions: 106

Total Answers: 96

Location: Grenada

Member since Sun, Dec 20, 2020

3 Years ago

tristab questions

1 How to use the new Webpack devServer configuration?

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Discord.JS get member from user ID

Sun, Jan 31, 21, 00:00, 3 Years ago

1 React: Passing Props not working. What am I missing?

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How can i extract vowels in a Javascript String?

Fri, Oct 23, 20, 00:00, 4 Years ago

1 Jest encountered an unexpected token when testing a Vue single file component

Sat, May 23, 20, 00:00, 4 Years ago

View All

answered 13 Years ago averyc · Accepted Answer

Here is a possible way to achieve this. Let's say the div showing by default has class default and the one that shows on hover has class onhover.

Fiddle: http://jsfiddle.net/jPneT/1/

$('.up-down').mouseover(function(){

    $('.default').stop().animate({

        height: 0    

    }, 200);                        

}).mouseout(function(){

    $('.default').stop().animate({

        height: 200 

    }, 200)    

});