I need help in Javascript

Hi,

I want to give a delay in my code when pictures are changing in the toggle menu.
I want something like this website: https://avada.theme-fusion.com/barber-shop/
Best regards,
Peyman

 <!-- header -->
  <header class="container-fluid header">

    <nav class="nav">
      <ul>
        <li id="home">
          <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>
 // menu toggler clikc 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)");
    }
  );