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

Question

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?

Answer 1

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

Answer 2

You can use a css sprite and animate background-position. It won't work in Firefox, so you need to use this plugin suggested here Background Position animation in jQuery not working in Firefox.
Good thing about this solution is that you can easily fallback to css in case JS is disabled.

html:

<div id="img"></div>

css

#img {
    height: 256px;
    width: 256px;
    background: url(http://i42.tinypic.com/auwns0.jpg) 0 0 no-repeat;
}

/* Fallback */
#nojs #img:hover { background-position: 0 -256px; }

jQ:

$('#img').hover(function(){
    $(this).stop().animate({'background-position': '0 -256px'});
}, function(){
    $(this).stop().animate({'background-position': '0 0'});
});

Example:

http://jsfiddle.net/elclanrs/T2JXn/9/

Answer 3

I did not search for the code on the website you have mentioned, but you could use something like this:

<div id="foo">
    <div id="onMouseIn" style="display:none"><img src="inPicture"/></div>
    <div id="onMouseOut"><img src="outPicture"/></div>   
</div>

$(document).ready(function(){
    $('#foo').hover(function(){
        //This is onMouseIn event
        $('#onMouseIn').slideDown(150);
        $('#onMouseOut').slideUp(150);
    }, 
    function(){
        //This is onMouseOut event
        $('#onMouseOut').slideDown(150);
        $('#onMouseIn').slideUp(150);
    });
});

Here is the fiddle.

Answer 4

Here is a tutorial you might like:

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/