<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script>
$(document).ready(function(){
$(".start").click(function(){
$("div").animate({'100px'},3000);
$("div").animate({fontSize:'3em'},3000);
});
$(".stop1").click(function(){
$("div").stop();//仅仅停止第一个动作
});
$(".stop2").click(function(){
$("div").stop(true);//真的停止了所有的动作
});
$(".stop3").click(function(){
$("div").stop(true,true);//真的停止了所有的动作并且真的一瞬间完成了第一个的动作
});
})
</script>
<title>jQuery三种动画停止</title>
<style type="text/css">
#panel
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
padding:50px;
}
</style>
</head>
<body>
<button class="start">开始</button>
<button class="stop1">停止</button>
<button class="stop2">停止所有</button>
<button class="stop3">停止所有并完成</button>
<div id="panel">Hello world!</div>
</body>
</html>