Javascript jQuery动画中断问题

我正在编写angular程序，其中有一个图像，我正在使用jQuery.animate（）属性设置动画。该程序工作正常，但在动画中间使用ui router更改状态时会出现问题

它会导致突然的行为，如url更改，但动画过程仍然持续。我尝试了.stop（）、.clearQueue（）甚至.finish（）属性在切换之前结束动画，但没有任何帮助

app.controller（'appCtrl'，函数（）{
setTimeout（函数（）{
$（'#character'）。动画（{marginTop:“A1px”，marginLeft:“B1px”}，1000）；
},1000);
setTimeout（函数（）{
$（'#character'）。动画（{marginTop:“A2px”，marginLeft:“B2px”}，1000）；
},3000);
setTimeout（函数（）{
$（'#character'）。动画（{marginTop:“A3px”，marginLeft:“B3px”}，1000）；
},5000);
setTimeout（函数（）{
$（'#character'）。动画（{marginTop:“A4px”，marginLeft:“B4px”}，1000）；
},7000);
setTimeout（函数（）{
$（'#character'）。动画（{marginTop:“A5px”，marginLeft:“B5px”}，1000）；
},9000);
});
使用
ngAnimate
而不是jQuery的
.animate（）
属性

查看插图和示例

对于以上内容。试试这个

angular.element(document.querySelector(#character)).animate({marginTop:"A1px",marginLeft:"B1px"},1000);

而不是

$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);

这里有更新

使用并在控制器上删除超时

$scope.$on('$destroy', function() {
  $timeout.cancel(timer);
});

更好的练习永远不会合并。
.stop（）
通常是不够的。您是否尝试过使用
.stop（true，true）
？此外，在发布代码片段时，请确保在运行它时，它确实有效。现在我只收到了一堆JS错误。是的，即使对于动画来说，这也不起作用。哦，好吧，但是我们不能纠正上面的问题，因为我正在考虑最后一次使用jquery，如果你使用jquery的话。另外，发一个帖子或摆弄一下这个问题。我仍然感到困惑。有谁能帮我编写与Sibi Raj所说的相同的代码吗？还有，我想解决我上面提到的问题advance@AmitRSingh. 用你的问题创造一个简单的解决方案。我将检查上面的链接，并尝试在第一页和第二页之间切换状态，而不让第二阶段完成动画