jquery delay（）介绍及使用指南

jQuery的delay()方法是一种很方便的延迟执行函数。在执行动画效果时，一般会在代码中加入setTimeout()或setInterval()等函数，以实现把一个动画拆成若干帧分别执行的效果。但是这样写代码较为繁琐，而且还会带来重复的代码和代码混乱的问题。而delay()方法就是为了解决这个问题而出现的，它可以延迟后续执行的函数的执行时间，让程序执行更加简单、直观。

基本用法

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

$(selector).delay(time)

其中，selector表示你要操作的元素，可以用CSS选择器指定，time表示延迟的时间（毫秒），在延迟时间到达后，selector所指定的元素的后续方法才会开始执行。

举个例子，以下代码表示在500毫秒后把一个div元素的背景颜色切换为红色：

$("div").delay(500).css("background-color", "red");

链式调用

delay()方法通常与jQuery的动画效果结合使用，以实现更加复杂的效果。例如，以下代码表示让一个div元素在500毫秒时间内逐渐向下移动20个像素：

$("div").delay(500).animate({top: "+=20px"});

代码中的animate()方法调用表示执行动画效果，delay()方法调用表示在动画开始前延迟500毫秒。注意这两个方法之间可以链式调用，因此代码非常简洁。

示例

下面是两个使用delay()方法的实际示例：

示例1：在按钮被点击时使文字颜色渐变

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Delay示例1</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    button {
      padding: 10px;
      border: none;
      background-color: #7cbce7;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
    h1 {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>jQuery Delay示例1</h1>
  <button id="btn">点击我</button>

  <script>
    // 按钮被点击时，把h1元素的文字颜色渐变为红色
    $("#btn").click(function() {
      $("h1").delay(1000).animate({
        color: "red"
      }, 1000);
    });
  </script>
</body>
</html>

代码中的animate()方法表示对h1元素进行渐变动画，把颜色从原来的黑色逐渐变为红色，动画的时间为1秒。而在animate()方法调用前，我们使用了delay(1000)语句使之前的代码延迟1秒后再执行。这样，在点击按钮后我们就会看到文字颜色在1秒钟内渐变为红色。

示例2：在鼠标悬停时显示隐藏文字

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Delay示例2</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #f60;
      position: relative;
    }
    #box p {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0;
      padding: 0;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      transform: translate(-50%, -50%);
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <p>这是一个隐藏的文字块</p>
  </div>

  <script>
    // 鼠标悬停时显示隐藏文字
    $("#box").mouseover(function() {
      $(this).find("p").delay(500).css("opacity", 1);
    }).mouseout(function() {
      $(this).find("p").delay(500).css("opacity", 0);
    });
  </script>
</body>
</html>

代码中的mouseover()事件和mouseout()事件表示当鼠标悬停在#box元素上时，我们会把它内部的p元素显示出来，当鼠标移开时，p元素会被隐藏。而这个显隐过程通过使用delay(500)方法进行了延迟，以实现更加柔和的动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery delay（）介绍及使用指南 - Python技术站

jquery delay（）介绍及使用指南

基本用法

链式调用

示例

示例1：在按钮被点击时使文字颜色渐变

示例2：在鼠标悬停时显示隐藏文字

相关文章