jQuery仅停止正在设置的动画

Question

假设我有这个。

var e = $('#div');

我想做

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

然后

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

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

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

Answer 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>

编辑：

刚刚注意到您提到不想使用队列：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>

Answer 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>