jQuery動畫中斷問題

Question

我正在研究的角度程序中，我有一個圖像，我通過使用jQuery .animate（） property.Its工作正常，但使用ui路由器更改狀態時發生問題在動畫的中間。

這導致即使像其URL的變化，但在動畫過程中仍然persist.I試圖.stop（），.clearQueue（）甚至.finish（急行爲）屬性來結束動畫切換之前，但沒有任何幫助我。

app.controller('appCtrl',function() { 
 
    setTimeout(function() { 
 
    $('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000); 
 
    },1000); 
 
    setTimeout(function() { 
 
    $('#character').animate({marginTop:"A2px",marginLeft:"B2px"},1000); 
 
    },3000); 
 
    setTimeout(function() { 
 
    $('#character').animate({marginTop:"A3px",marginLeft:"B3px"},1000); 
 
    },5000); 
 
    setTimeout(function() { 
 
    $('#character').animate({marginTop:"A4px",marginLeft:"B4px"},1000); 
 
    },7000); 
 
    setTimeout(function() { 
 
    $('#character').animate({marginTop:"A5px",marginLeft:"B5px"},1000); 
 
    },9000); 
 
});

<div class=""> 
 
    <div class=""> 
 
    <img src="character.png" id="character" alt="" /> 
 
    </div> 
 
    <div class=""> 
 
    <input type="button" name="name" value="BACK" ui-sref="backpage"> 
 
    <input type="button" name="name" value="NEXT" ui-sref="nextpage"> 
 
    </div> 
 
</div>

Answer 1

這裏被更新plunker。

使用$timeout並在控制器上銷燬刪除超時。

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

更好的做法永不合並jQuery with Angular。

Answer 2

使用ngAnimate而不是jQuery的.animate()財產。

查看here的插圖和示例。

對於上述。試試這個

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

代替

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