jQuery 仅停止正在设置的动画答案

【问题标题】：jQuery Stop Only Animations Being SetjQuery 仅停止正在设置的动画
【发布时间】：2015-04-10 21:54:10
【问题描述】：

说我有这个。

var e = $('#div');

我想做

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

然后

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

立即停止e 上的原始top 动画，但不停止淡入淡出。

注意我也在使用 jQuery Transit 插件代替 jQuery animate。

【问题讨论】：

您是否使用 jQuery 和 CSS 过渡来制作 DOM 动画？您想在新动画开始之前停止这些动画吗？
是的，所以说当前是否有淡出和顶部正在运行的动画，然后将顶部设置为其他地方的动画；我希望原始顶部动画停止，而淡出继续发生
@BrianLeishman 是要求 a) 开始 e.fadeOut(3000) -> b) 期间 .fadeOut - 在3000 duration - .animate 到 top 内： 500 -> c) .animate 到 top:250 - 所有在初始 .fadeOut 期间？或者，整个过程应该是3000 + 3000 + 3000 - 9000 的总持续时间？
是的，它应该像第一个场景一样，第二个 top 动画“切断”第一个动画，但留下 fadeOut 来完成它正在做的事情

标签： jquery jquery-animate css-transitions jquery-transit

【解决方案1】：

您可以在队列选项为 false 的情况下运行淡入淡出动画。第一个按钮启动两个动画，第二个按钮仅覆盖顶部动画。

我认为还有另一种使用命名队列的方法，但我发现它更冗长，因为您必须使用 .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>

编辑：

刚刚注意到您提到不想使用 queue:false。下面是使用队列名称和停止单个动画的同一件事。

$(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>

【讨论】：

谢谢！最后，有人提出了只停止某些动画的解决方案。我对此进行了一些测试，它似乎按预期工作，但我会在明天早上进行更多测试，并在我确认一切正常时奖励赏金。

【解决方案2】：

试试

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>

【讨论】：