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