jQuery slide/bounce div in from right on hover

New to jQuery but trying to figure this out.

What I have is a list of boxes of content. When we hover each box, a div will slide in from the right 开发者_如何转开发with detailed info (designer would like a 'bounce' effect also), and hide on mouse out.

I do have access to jQueryUI already in the project.

Here is what I have so far:

HTML for each box

<div class="tool_master show">
    <div class="tool_hover"> Hover information here  </div>
    <div class="tool_box" > Content here    </div>
</div>

CSS

.tool_box {
    height:100px;
    width:460px;
    position:relative;
    }
.tool_hover {
    height:100px;
    width:460px;
    background:#525051;
    position:absolute;
    z-index:100;
    display:none;
}

I created a jquery script to show/hide which works

$(".show").hover(function(){
        $(this).closest("div").find(".tool_hover").toggle();
    }, function(){
       $(this).closest("div").find(".tool_hover").toggle();
    });

This gets the job done but does not provide the "experience" that the designer wants.

What it needs to do is slide in from the right, quickly, and perhaps have a bounce effect. On exit, slide out to the right. I'm not all that well versed in jquery animation.

Can someone help me out?

Thanks in advance!

What you want is animate - replace your toggle with animate, and feed in paramaters for (properties,duration,easing,callbackFunction).

In order for this to work with your code, you'll need to change / add a few things. First, remove display:none from your tool_hover - instead we'll hide it by positioning it out-side the .show box, and then set .show's overflow to hidden.

To your CSS:

.show {
     overflow:hidden; 
     position:relative; /* Otherwise the absolute positioned child element ignores overflow */
}
.tool_hover {
    z-index: 0; /* Take precedence over .tool_box */
    left: 500px; /* Starting position is outside .show , effectively hidden */
}
.tool_box {
    z-index: 1; /* So hover will cover this box */
}

Next, we want to replace your toggle function with animate. When you hover over the box, we will tell the .tool_hover class to come back in by settings its left position back to 0. Simply replace the first .toggle() with:

...
.animate({
    'left' : '0px'},
    'slow');

and the second toggle() with:

...
.animate({
    'left' : '0px'},
    'slow');

Here is a jsfiddle to demonstrate