博客

jQuery中delay()方法的用途是什么

  • Post category:jquery

在jQuery中，delay()方法用于延迟执行队列中的函数。使用delay()方法，我们可以在执行队列中的函数之间添加延迟，以便在一定时间后再执行下一个函数。本文将详细讲解delay()方法的用法，并提供两个示例，演示如何使用delay()方法延迟执行队列中的函数。

delay()方法的基本语法

delay()方法基本语法如下：

$(selector).delay(time);

其中，selector是要操作的元素的选择器，time是要延迟的时间，单位为毫秒。delay()方法只能用于执行队列中的函数，不能用于延迟其他类型的操作。

示例1：使用delay()方法延迟执行队列中的函数

以下是一个示例，演示如何使用delay()方法延迟执行队列中的函数：

<!DOCTYPE html>
<html>
<head>
  <title>delay()方法示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    $("#box").fadeOut(1000).delay(1000).fadeIn(1000);
  </script>
</body>
</html>

在这个示例中，我们首先创建了一个<div>元素，并将其id属性设置为box。然后，我们使用fadeOut()方法将<div>元素淡出，然后使用delay()方法延迟1秒钟，最后使用fadeIn()方法将<div>元素淡入。当代码执行完成后，<div>元素将会在1秒钟内淡出，然后在1秒钟后再淡入。

示例2：使用delay()方法延迟执行多个函数

以下是另一个示例，演示如何使用delay()方法延迟执行多个函数：

<!DOCTYPE html>
<html>
<head>
  <title>delay()方法示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    $("#box").fadeOut(1000).delay(1000).fadeIn(1000).delay(1000).fadeOut(1000).delay(1000).fadeIn(1000);
  </script>
</body>
</html>

在这个示例中，我们使用delay()方法延迟了多个函数的执行。具体来说，我们使用fadeOut()方法将<div>元素淡出，然后使用delay()方法延迟1秒钟，然后使用fadeIn()方法将<div>元素淡入。接着，我们再次使用delay()方法延迟1秒钟，然后使用fadeOut()方法将<div>元素淡出，最后再次使用delay()方法延迟1秒钟，最后使用fadeIn()方法将<div>元素淡入。当代码执行完成后，<div>元素将会在1秒钟内淡出，然后在1秒钟后再淡入，然后再次在1秒钟后淡出，最后在1秒钟后再淡入。

结论

delay()方法是jQuery中一个非常有用的方法，用于延迟执行队列中的函数。本文详细讲解了delay()方法的语法和用法，并提供了两个示例，演示如何使用delay()方法延迟执行队列中的函数。需要注意的是，delay()方法只能用于执行队列中的函数，不能用于延迟其他类型的操作。

Tags: