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'');

    });