I have some buttons that have drawer menus and what I'd like to do is add a state so that when the user hovers over the button, the drawer bumps out slightly (maybe with a little wiggle/rubber-banding) so that they know that there's a drawer with more information.

I have the sliding working and a hover function set up, but I don't know how to implement a partial slideDown.

Any ideas?

FIDDLE.

Code:

<div class="clause">
    <div class="icon"><img src="http://i.imgur.com/rTu40.png"/></div>
    <div class="label">Location</div>
    <div class="info">Midwest > Indiana, Kentucky; Southwest > Texas, Nevada, Utah; Pacific > California, Hawaii</div>        
</div>
<div class="drawer">Info 1<br/><br/></div> 
<div class="drawerBottom"></div>

$(".clause").click(function() {
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden"))
        tmp.slideDown('3s');
    else
        tmp.slideUp('3s');
});

$(".clause").hover(function() {

});