Hola, resulta que quiero que un div se muestre con un efecto deslizante solo cuando se haga click en uno de sus hijos.
Al div padre le doy la id "
contenedor" y al hijo encargado de mostrarlo le doy la id "
toolsRight" (al otro hijo que no interviene en el efecto le doy la id "
toolsLeft"), aquí su html:
Código HTML:
<div id="contenedor">
<div id="toolsLeft"></div>
<div id="toolsRight"></div>
</div>
Como pueden ver en el siguiente css, a
contenedor lo mantengo con un
width:83px; que es el resultado de la suma del ancho de
toolsLeft +
toolsRight.
Código:
#contenedor{
overflow:hidden;
background-image:url(img/menu/degradado.png);
background-repeat:no-repeat;
width:83px; /*372px*/
height:29px;
position:absolute;
top:0px;
left:0px;
}
#toolsLeft {
float:left;
background-image:url(img/menu/toolsLeft.png);
background-repeat:no-repeat;
background-position:top;
width:53px; height:27px;
}
#toolsRight {
float:right;
background-image:url(img/menu/toolsRight.png);
background-repeat:no-repeat;
background-position:top;
width:30px; height:27px;
overflow:hidden;
}
La idea es que el ancho de
contenedor crezca/decrezca cuando se haga click en
toolsRight, haciéndolo con un efecto deslizante, para ello hice lo siguiente:
Código:
$(document).ready(function(){
$("#toolsRight").click(function() {
$("#contenedor").animate({width: '372px', opacity: '1'}, "slow");
});
$("#toolsRight").click(function() {
$("#contenedor").animate({width: '83px', opacity: '1'}, "slow");
});
});
Bien, el tema está en que al hacer click en
toolsRight,
contenedor crece y decrece al mismo tiempo.
Lo que no puedo lograr es que el efecto "pare" cuando
contenedor alcanza un
width:372px; y que luego al hacer click nuevamente en
toolsRight se vuelva a reproducir, esta vez "parando" cuando
contenedor llegue a un
width:83px;
¿Alguna ayudita, articulo o link? desde ya muchisimas gracias, espero haber explicado bien el problema.
Un saludo
