Hover on one div, use jQuery to slide in another div from right

I have the following:

<div class="holdingbox">
 <div class="leftbox">Stuff</div>
 <div class="rightbox">Stuff to reveal</div>
</div>

holdinbox has overflow of hidden leftbox is left floated rightbox is right floated and all the way outside of the holdingbox except for the edge (just enough so it looks like a tab).

On hover of holdingbox, I want rightbox to slide in (it will have an answer to a question in leftbox). When mouse is moved away rightbox slides back out.

I know I n开发者_Go百科eed jQuery for this but I'm a bit stumped on how to use hover on one div to slide in another div from the right.

Any help is appreciated!

Thanks, Chris

Do you mean something like this?

You just need to do some calculations of your divs widths and animate a container properly. Good luck.

$('div.holdingbox').hover(function(){
    $(this).find('div.rightbox').animate(
        { 'margin-top': '-100px' }
    ); 
});

And you can play with the exact animation