正文

掌握jQuery：如何巧妙使用stop函数暂停和恢复代码执行

/0 浏览量
0428

在jQuery中，stop() 函数是一个非常实用的方法，它可以帮助你控制动画的执行，特别是在动画队列中。这个函数可以暂停当前正在执行的动画，或者清除动画队列中所有未执行的动画，从而让你可以更加灵活地控制动画的执行。

基本用法

stop() 函数可以接受两个参数：clearQueue 和 gotoEnd。这两个参数都是布尔值，用来控制动画队列的处理方式。

  • clearQueue：如果设置为 true，则清除动画队列中所有未执行的动画。
  • gotoEnd：如果设置为 true，则将当前动画立即完成。

如果不传递任何参数，stop() 函数默认只暂停当前动画。

示例

假设我们有一个按钮，点击后会使一个div元素平滑地移动到页面的另一侧：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Stop Function Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  #myDiv {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
  }
</style>
</head>
<body>

<button id="moveButton">Move Div</button>
<div id="myDiv"></div>

<script>
  $(document).ready(function(){
    $("#moveButton").click(function(){
      $("#myDiv").animate({left: "500px"}, 2000);
    });
  });
</script>

</body>
</html>

在这个例子中，点击按钮后，div会向右移动。现在，让我们看看如何使用 stop() 函数：

  1. 暂停动画：
$("#moveButton").click(function(){
  $("#myDiv").animate({left: "500px"}, 2000);
  setTimeout(function(){
    $("#myDiv").stop(); // 暂停动画
  }, 1000);
});

在上面的代码中，我们使用 setTimeout 在动画执行了1秒后暂停动画。

  1. 清除动画队列：
$("#moveButton").click(function(){
  $("#myDiv").animate({left: "500px"}, 2000);
  setTimeout(function(){
    $("#myDiv").stop(true); // 清除动画队列
  }, 1000);
});

在这个例子中，stop(true) 不仅暂停当前动画，还会清除动画队列中所有未执行的动画。

  1. 立即完成动画：
$("#moveButton").click(function(){
  $("#myDiv").animate({left: "500px"}, 2000);
  setTimeout(function(){
    $("#myDiv").stop(false, true); // 立即完成动画
  }, 1000);
});

在这个例子中，stop(false, true) 会使动画立即完成，并继续执行动画队列中的下一个动画（如果有的话）。

总结

stop() 函数是jQuery中一个非常强大的工具，可以帮助你更好地控制动画的执行。通过合理地使用这个函数，你可以创建出更加复杂和有趣的动画效果。

-- 展开阅读全文 --