jQuery deslizar / rebotar div desde la derecha al pasar el mouse

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.

Esto es lo que tengo hasta ahora:

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>

CO

.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.

¿Alguien me puede ayudar?

Gracias de antemano!

preguntado el 27 de agosto de 11 a las 22:08

1 Respuestas

Lo que quieres es animado - 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');

Aquí hay una jsFiddle demostrar

Respondido 28 ago 11, 03:08

Perfect. Thank you very much. I also found this: gsgd.co.uk/sandbox/jquery/easing and was able to incorporate a bounce effect that the designer desired. Thanks again! - jrhaberman

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.