CODEWITHSUNDEEP
jqueryjquery-uijquery-animate
jrhaberman
jrhaberman

Reputation: 101

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!

Upvotes: 0

Views: 4687

Answers (1)

chris
chris

Reputation: 2444

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

Upvotes: 3

Related Questions