En estos caso viene bien un plugin:
http://plugins.jquery.com/project/Pa...sume-animation
Ese plugin permite pausar y resumir una animación. Ejemplo:
http://jsbin.com/aleheg/2 (Mirá en "edit" para ver el código. Lo que sale a la izquierda es el plugin).
Otra forma (Que puede ser mejor, pues nos evitamos el uso de plugins y además es más personalizable) es usar .stop() y .animate() con un correcto uso de .mouseenter() y .mouseleave(), haciendo que la velocidad sea lenta:
http://jsbin.com/aleheg/3
Código:
Código HTML:
Ver original<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> $(document).ready(function () {
$('#hello').mouseenter(function(){
_animarDiv($('#moveme'));
})
.mouseleave(function(){
_detenerAnimacion($('#moveme'));
});
//funcion para animar
function _animarDiv(_elem){
var velocidad = 80000;//velocidad muy baja
var topActual = _elem.offset().top;
_elem.animate({
top: topActual + 10000//animar propiedad TOP
},velocidad,'linear');//easing "linear", pero puede ser otro
}
//funcion para detener animacion
function _detenerAnimacion(_elem){
_elem.stop();
}
});
#moveme{
position:fixed;
right:0;
top:0;
width:100px;
height:100px;
background:yellow;
}
<p id="hello">Mover el div
</p>