在 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");
}

我在goToNextEvent之前调用stopInterval，它正在工作，但是当我再次调用startInterval时，光标不再移动，即使调用了moveIndicator，我也已经用日志检查了它。

这里可能有什么问题？

Answer 1

所以问题出在goToNextEvent函数上。

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

返回一个以像素为单位的值，例如 150px，因此当调用moveIndicator时，Pos += Dist * SpeedRatio;变成了字符串连接，而不是加法。

解决方案是将Pos线替换为

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