problema hover - jquery

gmur05 · #1 (**permalink**) 13/01/2013, 16:21

Hola soy nuevo en el foro, queria ver si me pueden ayudar, el problema que al pasar el mouse varias veces seguidas , al salir me sigue repitiendo la animacion , como hago que respete si estoy over u out, al hacer out corte y no repita,
y por otro lado como hago para al hacer over que la animacion expanda o se agrande en proporcion a los 4 lados, no hacia la izquierda.

les dejo el html gracias por su ayuda.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

var x=$(document);
x.ready(inicializar);

function inicializar(){
var x=$("#objetivo");
x.hover(entraRaton,saleRaton);

}

function entraRaton(){
$(this).animate({width:300,height:300},500);

}

function saleRaton(){
$(this).animate({width:250,height:250},500);

}
</script>
</head>

<body>

<div id="objetivo" style="background:#0C6; width:250px; height:250px; margin-top:100px; margin-left:100px">yo soy un div</div>

</body>
</html>

gebremswar · #2 (**permalink**) 14/01/2013, 10:12

Hola gmur05, que tal. Bienvenido a Foros del Web

Prueba usando el método .stop() de jQuery

Agrégalo antes del método .animate() en ambas funciones. De la siguiente manera:

Código Javascript:

Ver original$(this).stop().animate(...);

Modifiqué tu código inicial de una manera mas adecuada utilizando el método .on() disponible desde la versión 1.7+ de jQuery. Como también el uso de los métodos: .mouseenter() y .mouseleave() para los respectivos eventos de mouse.

Código Javascript:

Ver original<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
var $inicializar = function() {
    $('#objetivo').on({
        mouseenter : function() { //entraRaton
            $(this).stop().animate({width:300,height:300},500)
        },
        mouseleave : function() { //saleRaton
            $(this).stop().animate({width:250,height:250},500)
        }
    });
};
$($inicializar); //equivale a $(document).ready()
</script>
</head>
<body>
<div id="objetivo" style="background:#0C6; width:250px; height:250px; margin-top:100px; margin-left:100px">yo soy un div</div>
</body> 
</html>

Coméntanos tus dudas.