jQuery animation interruption issue

Question

I am working on angular program in which I have an image which I am animating by using jQuery .animate() property.Its working fine but the issue occur when I change the state using ui-router in middle of the animation.

It result in abrupt behaviour like even its url changes but the animation process still persist.I have tried .stop() , .clearQueue() and even .finish() property to end the animation before switching but nothing help me at all.

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>

`.stop()` is often not enough. Have you tried using `.stop(true, true)`? Also, when posting a code snippet,et make sure that when you run it, it actually works. Right now I just get a bunch of JS errors. — Terry, Aug 17 '17 at 06:13
oh ok , but cant we rectify the above issue as I am thinking of using that as last resort — Amit R Singh, Aug 17 '17 at 06:22
if you use jquery that will happen. Also, post a plunker or fiddle with the question — Sibiraj, Aug 17 '17 at 06:29

score 1 · Answer 1 · answered Aug 17 '17 at 06:28

1

Use ngAnimate instead of jQuery's .animate() property.

Check here for illustrations and examples.

For the above. try this

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

instead of

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

answered Aug 17 '17 at 06:28

Sibiraj

4,486
7
33
57

I am still getting confused can any one help me to write the equivalent code like Sibi Raj said and also I want to resolve the issue which I stated above.Thnx in advance – Amit R Singh Aug 17 '17 at 07:31
@AmitRSingh. Create a simple plunk with your problem. I will chek – Sibiraj Aug 17 '17 at 07:32
check the above link ,and try to switch states between first page and second without letting second stage to complete its animation – Amit R Singh Aug 17 '17 at 11:22

score 1 · Accepted Answer · answered Dec 08 '17 at 07:22

1

Here is updated plunker.

Use $timeout and on controller destroy remove the timeout .

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

Better practice do never merge jQuery with Angular.

answered Dec 08 '17 at 07:22

Durga

15,263
2
28
52

jQuery animation interruption issue

2 Answers2