Я хочу добавить задержку в мое меню, когда меняются картинки. Как это возможно?

Question

Это мои HTML и jQuery коды. Когда nav и его дочерние элементы станут зависать, я бы хотел изменить картинки меню с задержкой. Можете ли вы вести меня?

<!-- 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 коды. Когда nav и его дочерние элементы станут зависать, я бы хотел изменить картинки меню с задержкой. Можете ли вы вести меня?

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)");
    },

Answer 1

Вы можете использовать setTimeout() метод для задержки вашего кода.

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