javascript - 当图片发生变化时，我想为我的菜单添加延迟。这怎么可能？

Question

这些是我的 HTML 和 jQuery 代码。当导航及其子项变为悬停时，我想延迟更改菜单的图片。你能指导我吗？

<!-- header --

<nav class="nav">
  <ul>
    <li>
      <a href="" data-index="1">
        Home
      </a>
    </li>
    <li>
      <a href="" data-index="2">
        About Us
      </a>
    </li>
    <li>
      <a href="" data-index="3">
        Services
      </a>
    </li>
    <li>
      <a href="" data-index="4">
        Shop
      </a>
    </li>
    <li>
      <a href="" data-index="5">
        Our Teams
      </a>
    </li>
    <li>
      <a href="" data-index="6">
        Blog
      </a>
    </li>
    <li>
      <a href="" data-index="7">
        Contact Us
      </a>
    </li>
  </ul>
</nav>

这些是我的 HTML 和 jQuery 代码。当导航及其子项变为悬停时，我想延迟更改菜单的图片。你能指导我吗？

jQuery

  // menu toggler click event

  $(".menu-toggler").click(function() {
    $(this).toggleClass("menu-toggler-close");
    $(".nav").fadeToggle();
  });
  $(".nav").click(function() {
    $(".menu-toggler").removeClass("menu-toggler-close");
    $(".nav").fadeOut();
  });
  $(".nav > ul").click(function(e) {
    e.stopPropagation();
  });

  $(".nav > ul > li > a").hover(
    function() {
      var dataIndex = $(this).data("index");

      $(".nav").css(
        "background",
        "url('images/nav" + dataIndex + ".webp') center center / cover"
      );
    },
    function() {
      $(".nav").css("background", "rgba(0, 0, 0, 0.8)");
    },

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用setTimeout()方法来延迟您的代码。

setTimeout(function()
{
    $(".nav").css(
        "background",
        "url('images/nav" + dataIndex + ".webp') center center / cover"
    );
}, 1000);