Перезапустить анимацию через JQuery

Question

Я использую jquery, чтобы запустить анимацию в интервале, и когда я нажимаю кнопку, которая перемещает мой div в другую позицию, завершает анимацию и очищает интервал

function startInterval(){
    Interval = setInterval(function(){
        moveIndicator();
    }, 50);
}

function stopInterval(){
    clearInterval(Interval);
}

function moveIndicator(){
    Pos += Dist * SpeedRatio;
    if(Pos >= W){
        Pos = W;
       stopInterval();
    }

    Animation = $("#Cursor").animate({ 
        left: Pos + "px",
    }, 49);
}

function goToNextEvent(){
    var Target = $("#Cursor").css("left");
    Target = parseInt(Target, 10);
    var PTarget = (Target / W) * 100;

    Animation.finish();

    $("#Cursor").css("left", Positions[NbCurrentEvent] + "%");
    Pos = $("#Cursor").css("left");
}

I я вызываю stopInterval непосредственно перед goToNextEvent , который работает, но когда я снова вызываю startInterval , курсор больше не перемещается, даже если moveIndicator * Вызывается 1011 *, по логам проверял.

Что может быть тут проблемат c?

Answer 1

Итак, проблема была в функции goToNextEvent .

Pos = $("#Cursor").css("left");

возвращал значение в пикселях, например 150 пикселей, поэтому при вызове moveIndicator , Pos += Dist * SpeedRatio; стал конкатенацией строк вместо добавления.

Решение состоит в замене строки Pos на

Pos = parseInt($("#Cursor").css("left"), 10);