not - mouseover jquery

La forma de detener y continuar la animación mientras usas el mouseover y mouseout en JQuery

Question

P.ej:

un simple ejemplo para explicar:

$(''.moveDiv'').animate({ "margin-left": 2000 }, 20000, ''linear'');

el moveDiv element se movería a la izquierda cuando se cargó, y ahora, cuando el mouse move over el moveDiv element , ¡deseo que se detenga y continúe moviéndose cuando el mouse move out !

¿Algunas ideas?

Encontré este código en esta pregunta de stackoverflow , así que solo quiero modificar el código para que pueda detenerse y continuar la animación cuando el mouse pase el mouse sobre él.

la demo del código

Answer 1

Acabo de encontrar el complemento sugerido en la solución de EBCEu4. Lo uso pero la solución reutilizable mucho menos sería:

var duration = 5000;
var target = 200;
$(''.moveDiv'')
.animate({ "margin-left": target }, duration, ''linear'')
.hover(
function(){
$(this).stop(true,false);
},
function(){
var $this = $(this);
var cur = parseInt($this.css(''margin-left''));
$this.animate({ "margin-left": target }, duration*((target-cur)/target), ''linear'')
});

Answer 2

Tratar:

$(''.moveDiv'')
.animate({ "margin-left": 2000 }, 20000, ''linear'')
.hover(function(){
$(this).stop(true,false);
},
function(){
$(this).animate({ "margin-left": 2000 }, 20000, ''linear'')
});

Déjame saber cómo te va...

oops .stop (verdadero, falso);

Answer 3

Pausa / Currículum Complemento de Animación

 $(document).ready(function () {
$(".moveDiv")
.mouseover(function () { $(this).pauseAnimation(); })
.mouseout(function () { $(this).resumeAnimation(); })
.startAnimation({ "margin-left": 2000 }, 20000, ''linear'');
});