I want to add delay to my menu when pictures are changing. How is it possible?

Feb 8 '20 Comments: 4 Answers: 1

-5

These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?

<!-- header --

<nav class="nav">
  <ul>
    <li>
      <a href="" data-index="1">
        Home
      </a>
    </li>
    <li>
      <a href="" data-index="2">
        About Us
      </a>

…

Open Full Question

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