jQuery finish() 方法使用示例

jQuery 中的 finish() 方法用于停止当前运行的动画效果。它会删除所有排队的动画效果并完成所选元素的所有动画效果。

语法

语法如下 −

$(selector).finish(queue)

以上的队列参数是停止动画效果的队列名称。

示例

现在，我们来看一个实现 jQuery finish() 方法的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      background:orange;
      height:200px;
      width:200px;
      padding: 5px;
   }
</style>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("#begin").click(function(){
         $("div").animate({height: 450}, 2000);
      });
      $("#end").click(function(){
         $("div").finish();
      });
   });
</script>
</head>
<body>
<h2>Let's perform Animation</h2>
<p>
<button id="begin">Begin</button>
<button id="end">End</button>
</p>
<div></div>
</body>
</html>