Способ остановки и продолжения анимации при наведении курсора и наведении мыши в JQuery

Question

Например:

простой пример для объяснения:

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

moveDiv element будет перемещаться влево при загрузке, а теперь, когда mouse move over the moveDiv element, Я хочу, чтобы он остановился и продолжил двигаться, когда mouse move out!

Есть идеи?

Я нашел этот код в этом вопросе stackoverflow , поэтомуЯ просто хочу изменить код, чтобы он мог останавливаться и продолжать анимацию при наведении мыши !!

демонстрация кода

Answer 1

Плагин анимации паузы / возобновления

    $(document).ready(function () {

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

    });

Answer 2

Только что нашёл плагин, предложенный в решении EBCEu4 - возможно, используйте это, но гораздо менее многократно используемое решение будет:

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 3

Попробуйте:

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

дайте мне знать, как вы попали ...

упс .stop (true, false);