您的位置：首页 > Web前端 > JQuery

jQuery停止动画finish和stop函数区别

2017-09-15 00:00 295 查看
stop()函数直接停止动画，finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值。

示例代码：

<html>

<head>
<meta charset="UTF-8" />
<title>jQuery停止动画finish和stop函数区别</title>
<style type="text/css"> div { border: 1px solid green; width: 200px; height: 200px; line-height: 200px; text-align: center;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "></script>
</head>

<body>
<button type="button" id="start">start</button>
<button type="button" id="start">stop</button>
<button type="button" id="finish">finish</button>
<div class=""> 动画 </div>
<script type="text/javascript"> $(document).ready(function() { $("#start").click(function() { $("div").animate({ width: '1800px' }, 3000); }); $("#stop").click(function() { //停止当前正在运行的动画， width: '+=100px'可以停止
//停止当前正在运行的动画 width: '1800px'不能停止
$("div").stop(); }); $("#finish").click(function() { //停止当前正在运行的动画 width: '+=100px'可以停止
//停止当前正在运行的动画 width: '1800px'可以停止，并且停止在最后一帧
$("div").finish(); }); }); </script>
</body>

</html>


说明：

示例中stop()函数没有停止动画，为什么？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航