为什么下拉的动画（也就是动画1）停不下来呢？
来源：5-3 jQuery中停止动画stop
悬炫
2017-03-02 17:03
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>stop</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
<input id="exec" type="button" value="执行动画"><br /><br />
点击观察动画效果：
<select id="animation">
<option value="1">stop()</option>
<option value="2">stop(true)</option>
<option value="3">stop(true,true)</option>
</select>
<a></a>
<input id="stop" type="button" value="停止动画">
<script type="text/javascript">
//点击执行动画
$("#exec").click(function(){
$("#aaron").animate({
height: 300
}, 2000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
})
$("#stop").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//当前当前动画
$aaron.stop()
} else if (v == "2") {
//停止所以队列
$aaron.stop(true)
} else if (v == "3") {
//停止动画，直接跳到当前动画的结束
$aaron.stop(true,true)
}
});
</script>
</body>
</html>
写回答
关注
2回答
-
- qq_齐步走_1
- 2017-04-19 17:10:34
它长度在不断加长，很难按到stop键，你换一下，让它width先动，把高放到第二个就好了
-
- qq_玲玲的大_04311806
- 2017-03-02 18:17:46
测了一下，可以用啊， 不过你那个高度变化和透明度变化太快了， 两秒钟就完成， 你可以不好点击， 你把时间改长一点试一下，应该是可以的。
祝学习进步
jQuery基础(四)—动画篇
jQuery基础教程动画篇，讲解jQuery基础开启动画修炼
85049 学习 · 262 问题
相似问题