javascript - jQuery slideUp/Down 奇怪事件

Question

我创建了一个导航栏，无论您的房子是否悬停在栏上，它都会上下滑动。

问题是 <a>当您的鼠标处于特定位置时，导航栏内的元素会闪烁和移动，任何人都可以解释为什么会发生这种情况以及错误是什么，以及可能的解决方案。

https://jsfiddle.net/xm4uLkg1/

谢谢，拉克兰。

Answer 1

当您调用 $(".navbar ul li a").fadeOut(200); 时这会将 css 属性设置为 display:none; .

现在，当您调用 $(this).fadeTo(200, 1); 时会发生什么？它只会制造一个<a>进入 View 的标签将采取与其他不同的位置是 display:none还没有ul为仅显示的 li a 提供完整空间标记以便它改变位置

要解决这个问题，您可以这样做

            window.onload = function() {
              $(".navbar ul li a").fadeOut(200);
              $(".navbar").slideUp("medium");
           };
           $(".navbar ul li a").mouseenter(function() {
              $(".navbar ul li a").fadeTo(200, 1);//This will set all a tags in vew
          });
          $(".navbar ul li a").mouseleave(function() {
            $(".navbar ul li a").fadeTo(100, 0.8); //This will set all a tags in view
          });
          $(document).ready(function() {
             $("#wrap").mouseenter(function() {

               $(".navbar ul li a").fadeIn(100);
               $(".navbar").stop().slideDown("fast");
             });
             $("#wrap").mouseleave(function() {

               $(".navbar ul li a").fadeOut(200);
               $(".navbar").slideUp("medium");
             });
          });