停止所有在指定元素上正在运行的动画,如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
实例:
<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘‘.animation‘ is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type="text/css">
*{margin:0;padding:0;}
html{font:400 13px/1.2em ‘Courier New‘;color:#000;}
.animation{width:100px;height:100px;background:red;border-radius:2px;text-align:center;line-height:100px;color:#FFF;}
button{background:#FF9E6B;padding:8px 16px;border:0;outline:none;-webkit-outline:none;margin-bottom:15px;font:400 13px/1.2em ‘Courier New‘;color:#FFF;border-radius:2px;}
</style>
<script type=‘text/javascript‘>
$(function(){
$(‘.start‘).click(function(){
$(‘.animation‘).animate({‘width‘:‘100px‘,‘height‘:‘100px‘,},0,‘linear‘);
$(‘.animation‘).animate({‘width‘:‘150px‘,},1500,‘linear‘);
$(‘.animation‘).animate({‘height‘:‘150px‘,},1500,‘linear‘);
$(‘.animation‘).animate({‘width‘:‘450px‘,‘height‘:‘300px‘,},1500,‘linear‘);
});
$(‘.stop‘).click(function(){
/*
stop : 该方法传递两个参数,默认值均为 false , 参数解析如下:
第一个参数:
1.false表示停止当前正在执行的动画但是动画序列并没有清除,
2.true清楚改节点上的所有动画序列
第二个参数:
1.false表示在stop时立即停止动画
2.true表示在停止动画的时候将当前属性直接设置成为当前动画的最终目标,例如:在执行第二个动画时点击stop按钮, ‘.animation‘ 的width直接设置成为150px;
*/
$(‘.animation‘).stop(true,true);
});
});
</script>
</head>
<body>
<button class=‘start‘>start</button>
<button class=‘stop‘>stop</button>
<div class=‘animation‘>stop()及参数</div>
</body>
</html>
时间： 2025-01-02 03:22:22