Comunidad PHPeros
Lenguajes => JavaScript => Mensaje iniciado por: RumbaStereo en 15 de Enero de 2013, 20:38:39 pm
-
Buenas a todos, hace poco me eh puesto a probar algunas cosas para hacer un poco mas amena la apariencia de paginas web para el usuario y me eh topado con esta funcion jquery .animate pero eh tenido un error; lo que quiero hacer es que al pasar el cursor encima de un div que contiene como fondo una imagen, se mueva dichos pixeles para mostrar el resto del contenido que hay en dicha div, todo funciona a la perfeccion con onmouseover="javascript:movimientosigueme();" onmouseout="javascript:movimientosiguemesoltar();" Pero el problema vien cuando coloco algo dentro de esta div pues al colocar el cursor encima de cualquier objeto dentro de la div con la funcion .animate esta se descontrola y hace movimiento hacia arriba y abajo y no para, les dejo el codigo.
HTML:
<div class="sigueme" id="siguemes" onmouseover="javascript:movimientosigueme();" onmouseout="javascript:movimientosiguemesoltar();">
<div style="position:absolute; width:32px; height:32px; left:22px; top:40px;">
<img src="facebook.png" />
</div>
</div>
CSS:
.sigueme{position:absolute; background-image:url(sigueme.png); right:0px; bottom:-74px; width:196px; height:100px; z-index:3;}
JAVASCRIPT:
function movimientosigueme() {
$('#siguemes').animate( { bottom: '+=74px' }, 1000);
}
function movimientosiguemesoltar() {
$('#siguemes').animate( { bottom: '-=74px' }, 1000);
}
Espero puedan colaborarme muchísimas gracias de corazón Saludos Buena suerte.