定义和用法
stop() 方法停止当前正在运行的动画。
语法
$(selector).stop(stopAll,goToEnd)
参数 | 描述 |
---|---|
stopAll | 可选。规定是否停止被选元素的所有加入队列的动画。 |
goToEnd | 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。 |
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入你的 jq 文件 -->
<script src="../../jq/jquery-2.js"></script>
<style>
*{margin:0;padding:0;}
#panl{
width:60px;
height:22px;
overflow: hidden;
margin:10px 0 0 10px;
border:1px solid black;
}
.head{
width:300px;
height:30px;
line-height:30px;
border:1px solid greenyellow;
background-color:fuchsia;
padding-left:8px;
}
.content{padding-left:8px;text-indent:2em;border-top:1px solid #0050D0;}
</style>
</head>
<body>
<script>
$(function () {
$("button:eq(0)").click(function(){
$("#panl").animate({height:'150px'},1000)
.animate({width:'300px'},1000)
.hide(2000)
.animate({height:'show',width:'show',opacity:'show'},1000)
.animate({height:'500px'},2000)
});
$("button:eq(1)").click(function(){
$('#panl').stop(); //停止当前动画,持续下一个动画
})
$("button:eq(2)").click(function(){
$('#panl').stop(true); //消除元素的所有动画(立即停止)
})
$("button:eq(3)").click(function(){
$('#panl').stop(false,true); // 当前动画直接到末尾状态,继续下一个
})
$("button:eq(4)").click(function(){
$('#panl').stop(true,true); // 清楚所有动画,让当前动画直接到达末尾状态
})
});
</script>
<button>开始一系列动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panl">
<h5 class="head">什么是jquery呢?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
jQuery凭借简洁的语法和跨平台的兼容性,
极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码
风格改变了JavaScript程序员的设计思路和
编写程序的方式。
</div>
</div>
</body>
</html>
记得点赞收藏哦,以便下次查阅!