Foros del Web » Programando para Internet » Javascript » Frameworks JS »

slideDown y slideUp

Estas en el tema de slideDown y slideUp en el foro de Frameworks JS en Foros del Web. Hola a todos, tengo una duda, estoy haciendo una prueba con las funciones slideDown y slideUp, para mostrar un div sobre una imagen, quiero que ...
  #1 (permalink)  
Antiguo 07/10/2011, 09:02
 
Fecha de Ingreso: junio-2010
Mensajes: 117
Antigüedad: 11 años, 5 meses
Puntos: 1
slideDown y slideUp

Hola a todos, tengo una duda, estoy haciendo una prueba con las funciones slideDown y slideUp, para mostrar un div sobre una imagen, quiero que al pasar el mouse por mi imagen, se muestre un div sobre esta, y cuando el mouse se quite de la imagen o del div que emergió se guarde de nuevo el div, he logrado que surga el div, y cuando salgo de la imagen se oculta perfecto, pero si me posiciono sobre el div se crea un ciclo, se muestra y oculta el div repetidas veces, que puedo hacer para que se quede quieto el div hasta quitar el mouse de el y la imagen???

mi estructura es la siguiente:

<div onmouseout="hidediv();">
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; z-index:1; background-color:#d8a92d; display:none; bottom:60%">contenido a mostrar</div>
<img src="foto.jpg" onmouseover="showdiv();" id="imagen" />
</div>


y estas son mis funciones:

function showdiv() {
$('#tool).slideDown(function(){});
}

function hidediv() {
$('#tool).fadeOut('slow');
}


Alguien me puede decir como solucionarlo? Mil gracias de antemano
  #2 (permalink)  
Antiguo 07/10/2011, 09:57
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 15 años
Puntos: 56
Respuesta: slideDown y slideUp

el onmouseover="showdiv();" colócalo donde tienes el mouseout (en el div principal)

<div onmouseout="hidediv();">
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; z-index:1; background-color:#d8a92d; display:none; bottom:60%">contenido a mostrar</div>
<img src="foto.jpg" onmouseover="showdiv();" id="imagen" />
</div>

<div onmouseout="hidediv();" onmouseover="showdiv();" >
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; z-index:1; background-color:#d8a92d; display:none; bottom:60%">contenido a mostrar</div>
<img src="foto.jpg" id="imagen" />
</div>

Tema de jQuery
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #3 (permalink)  
Antiguo 07/10/2011, 10:40
 
Fecha de Ingreso: junio-2010
Mensajes: 117
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: slideDown y slideUp

hice lo que me aconsejaste y sigue haciendo el mismo efecto, se cicla, y aparace y desaparece repetidas veces el div.

<div onmouseover="showdiv();" onmouseout="hidediv();">
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; background-color:#d8a92d; display:none; bottom:60%"></div>
<img src="images/4.jpg" id="imagen" />
</div>

function showdiv() {
$('#tool).slideDown(400);
}
function hidediv() {
$('#tool).fadeOut('slow');
}

asi quedó, le quite el z-index al estilo pensando que eso podia afectar, alguna otra idea?
  #4 (permalink)  
Antiguo 07/10/2011, 11:12
 
Fecha de Ingreso: junio-2010
Mensajes: 117
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: slideDown y slideUp

lo soluciones con mouseleave, y ya va perfecto, muchas gracias por la ayuda

Etiquetas: funcion, slidedown, slideup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:51.