使导航悬停下划线响应浏览器调整大小

Question

I currently have the following working navigation where an underline animates on link hover. I noticed however, when I resize the browser, the underline doesn't reset to the correct position. I assumed that if I reused some JS from my mouse leave function and used it in a window resize function it would work just ok, but I keep getting an error. Any thoughts?

https://codepen.io/anon/pen/MRQaMm

JS:

$(".underline-nav").css("width", $("#one").width());
   $(".underline-nav").css("margin-left", $("#one").css("margin-left"));
   var unav = $(".underline-nav");
   $('nav a').mouseover(function(){
     $(".underline-nav").css("transition", "all ease 0.43s" );
       var position = $(this).position();
       unav.css({
         "width": $(this).width(),
         "margin-left": $(this).css("margin-left"),
         "left": position.left
       });
   })
   $('nav').mouseleave(function() {
               $(".underline-nav").css("transition", "all ease 0.7s" );
     var firstChild = $(this).find('a:first-child');
     var position = firstChild.position();
       unav.css({

         "width": firstChild.width(),
         "margin-left": firstChild.css("margin-left"),
         "left": position.left
       });
   })

//NEW BUT CAUSES ERROR
     var resizeTimer;
     $(window).resize(function() {
         clearTimeout(resizeTimer);
        $(".underline-nav").css("transition", "all ease 0.7s" );
        var firstChild = $(this).find('a:first-child');
        var position = firstChild.position();
            unav.css({

                "width": firstChild.width(),
                "margin-left": firstChild.css("margin-left"),
                "left": position.left
            });
     })

Answer 1

The value of $(this) is undefined inside of the anonymous resize function. If you replace $(this) with $('nav') , everything works as expected.

In short, replace this…

$(window).resize(function() {
  …
  var firstChild = $(this).find("a:first-child");
}

…with this

$(window).resize(function() {
  …
  var firstChild = $("nav").find("a:first-child");
}

Demo

 $(".underline-nav").css("width", $("#one").width()); $(".underline-nav").css("margin-left", $("#one").css("margin-left")); var unav = $(".underline-nav"); $("nav a").mouseover(function() { $(".underline-nav").css("transition", "all ease 0.43s"); var position = $(this).position(); unav.css({ width: $(this).width(), "margin-left": $(this).css("margin-left"), left: position.left }); }); $("nav").mouseleave(function() { $(".underline-nav").css("transition", "all ease 0.7s"); var firstChild = $(this).find("a:first-child"); var position = firstChild.position(); unav.css({ width: firstChild.width(), "margin-left": firstChild.css("margin-left"), left: position.left }); }); //NEW BUT CAUSES ERROR var resizeTimer; $(window).resize(function() { clearTimeout(resizeTimer); $(".underline-nav").css("transition", "all ease 0.7s"); var firstChild = $("nav").find("a:first-child"); var position = firstChild.position(); console.log("position", position); unav.css({ width: firstChild.width(), "margin-left": firstChild.css("margin-left"), left: position.left }); }); 

 html { background-color: blue; } body { margin: 0; } .underline-nav { background: tomato; height: .25rem; position: absolute; top: 6vh; margin-top: 1vw; transform: translatex(4vw); transition: all ease 0.37s; z-index: 0; } .mainnav { padding-top: 1vh; width: 100%; position: absolute; z-index: 4; font-size: 0.8vw; text-align: center; display: flex; justify-content: center; align-items: center; } nav img { padding-left: 4vw; height: 3.5vw; } a { color: #fff; text-decoration: none; font-weight: 700; padding-left: 4vw; letter-spacing: 0.4em; } .sectionone { height: 100vh; background: url('media/bg.jpg') no-repeat center center fixed; background-size: cover; color: #fff; font-family: 'Raleway'; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <div class="mainnav"> <a id="one" href="#">HOME</a> <a href="#">LINK 1</a> <a href="#">LINK 2</a> <img src="/media/Asset 1.png" alt="logo"> <a href="#">LINK 3</a> <a href="#">LINK 4</a> <a href="#">LINK 5</a> <div class="underline-nav"> </div> </div> </nav>