Question

I am attempting to create an effect on my website that once you hover over a box, that div slides up to reveal another div containing more details. This is simular to how the following websites do this…

http://www.facebook.com/pages/create.php
http://plus.google.com/pages/create

Facebook – on clicking a category
Google+ – upon hovering over a category (how i would like my website to function)

If anyone could point me in the right direction that would be amazing, thanks 🙂

Answer 1

You can use jQuery’s $.animate() along with some CSS to achieve this effect like this:

Fiddle Here: http://jsfiddle.net/6dnRy/

CSS

.container {
    position: relative;
    float: left;
    margin: 10px;
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.inner {
    position: absolute;   
    top: 0;
}

.itemTop {
    width: 250px;
    height: 250px;
    background: #ccc;   
}

.itemBottom {
    width: 250px;
    height: 250px;
    background: #fff000;
}

HTML

<div class="container">
    <div class="inner">
        <div class="itemTop">Top</div>
        <div class="itemBottom">Bottom</div>
    </div>
</div>

<div class="container">
    <div class="inner">
        <div class="itemTop">Top</div>
        <div class="itemBottom">Bottom</div>
    </div>
</div>

JavaScript

/**    
 * $.on() is jQuery 1.7+
 * use $('.container').click(function(e){... for < 1.7
 */
$(document).on('click', '.container', function(e){
    e.preventDefault(); // Prevent Default Action
    $('.inner').animate({top:0}, 'linear'); // Reset Other Containers
    $('.inner', this).animate({top:-250}, 'linear'); // Animate Clicked Container
});

I hope this helps!