jQuery Stop Only Animations Being Set

Question

Say I have this.

var e = $('#div');

I want to do

e.fadeOut(3000).animate({'top':500}, 3000);

And then

e.animate({'top':250}, 3000);

Immediately, stopping the original top animation on e, but without stopping the fade.

Note I am also using the jQuery Transit plugin in place of jQuery animate.

Are you animating DOM using jQuery and CSS transitions? You wanted to stop any of those animation before new animation begin? — Jagadesh K, Apr 13 '15 at 13:19
Yes, so say if there's currently a fade out and an animation on the top running currently, and then the top is set to animate somewhere else; I would want the original top animation to stop, while the fade out keeps happening — Brian Leishman, Apr 13 '15 at 13:23
@BrianLeishman Is requirement a) start `e.fadeOut(3000)` -> b) _during_ `.fadeOut` - within `3000` `duration` - `.animate` to `top` : `500` -> c) `.animate` to `top`:`250` - all during initial `.fadeOut` ? Or, should the entire process be total duration of `3000` + `3000` + `3000` - `9000` ? — guest271314, Apr 13 '15 at 16:16
Yes, it should be like the first scenario, where the second `top` animation "cuts off" the first one, but leaves the `fadeOut` to finish what it's doing — Brian Leishman, Apr 13 '15 at 16:37

adrianvlupu · Accepted Answer · 2015-04-13T21:02:49.987

You can run the fade animation with the queue option false. The first button starts both animations and the second button overrides just the top animation.

I think there is another way of doing it using a named queue but I find it more lengthy because you have to manually start the animation with .dequeue('queueName')

$(function(){
 var $div = $('#myDiv');
 var $btnStart = $('#btnStart');
 var $btnEnd = $('#btnEnd');


 $btnStart.click(function(){
  $div.animate({'top':'500px'}, 3000);
  $div.animate({opacity: 0}, {duration: 5000, queue: false});
 });
 $btnEnd.click(function(){
  $div.animate({'top':0}, {duration: 3000, queue: false});
 });
});

#myDiv{
 background:red;
 height:20px;
 width:20px;
 position:absolute;
 top:100px;
 left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnStart">Start</button>
<button id="btnEnd">End</button>
<div id="myDiv">
</div>

EDIT:

Just noticed you mentioned not wanting to use queue:false. Below it's the same thing using queue names and stopping individual animations.

$(function(){
 var $div = $('#myDiv');
 var $btnStart = $('#btnStart');
 var $btnEnd = $('#btnEnd');

 $btnStart.click(function(){
  $div.animate({'top':'500px'}, {duration: 3000, queue:'top'});
  $div.dequeue('top');
  $div.fadeOut(5000);
 });
 $btnEnd.click(function(){
  $div.stop('top').animate({'top':0}, {duration: 3000, queue: 'top'});
  $div.dequeue('top');
 });
});

#myDiv{
 background:red;
 height:20px;
 width:20px;
 position:absolute;
 top:100px;
 left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnStart">Start</button>
<button id="btnEnd">End</button>
<div id="myDiv">
</div>

Thank you! Finally, someone has a solution for stopping only _certain_ animations. I've tested this a bit and it appears to be working as expected, but I'll test more tomorrow morning and award the bounty as such when I can confirm everything's working. — Brian Leishman, Apr 13 '15 at 21:51

score 0 · Answer 2 · answered Apr 14 '15 at 02:06

Try

var e = $("#div");

$("button").on("click", function() {
  if (!e.is(":animated")) {
      e.animate({"top":"+=500", "opacity":0}, 3000, "linear")
  }
  else {
      e.stop(true, false).animate({"top": "-=250", "opacity":0}, 3000, "linear")
  };  
});

#div {
  position:relative;
  top:0px;
  font-size:36px;
  border:2px solid green;
  background:orange;
  height:54px;
  width:54px;
  text-align:center;
}

button {
  width:54px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>click</button>
<div id="div"></div>

jQuery Stop Only Animations Being Set

2 Answers2