Question

我正在尝试使用下拉菜单创建导航栏菜单，并使用JS / jQuery使下拉菜单淡入淡出。当我将鼠标悬停在“摄影”按钮上时，我将其设置为菜单淡入的位置，但是当您将鼠标从“摄影”按钮移开时，下拉菜单会消失而不是淡出。我插入了一些警告来测试它缺少哪部分代码，它完全跳过了fadeOut（）函数。我用我的所有代码创建了一个小提琴。格子在小提琴上并不完美，但足以让人明白这一点。

HTML：

<ul class="navBarContainer">
  <li class="btn"><a class="btnText" href="AboutMe.html">About Me</a></li>
  <li class="btn" id="btnHover">
    <a class="btnText" href="Photography.html">Photography</a>
    <ul class="dropDown" id="photography">
      <li class="dropBtn"><a class="dropBtnText" href="Photography-Nature.html">Nature</a></li>
      <li class="dropBtn"><a class="dropBtnText" href="Photography-People.html">People</a></li>
      <li class="dropBtn"><a class="dropBtnText" href="Photography-Skiing.html">Skiing</a></li>
      <li class="dropBtn"><a class="dropBtnText" href="Photography-Trampoline.html">Trampoline</a></li>
      <li class="dropBtn"><a class="dropBtnText" href="Photography-Urban.html">Urban</a></li>
      <li class="dropBtn"><a class="dropBtnText" href="Photography-Vehicles.html">Vehicles</a></li>
    </ul>
  </li>
  <li class="btn"><a class="btnText" href="Cinematography.html">Cinematography</a></li>
  <li class="btn"><a class="btnText" href="ContactMe.html">Contact Me</a></li>
</ul>

CSS：

/*container for the nav bar*/

.navBarContainer {
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 1.75vw;
}

.navBarContainer .btn {
  background-color: black;
  padding-top: 1%;
  padding-bottom: 1%;
  flex-grow: 1;
  text-align: center;
  flex-basis: 0;
  transition: background-color .75s;
  -o-transition: background-color .75s;
  -moz-transition: background-color .75s;
  -webkit-transition: background-color .75s;
    list-decoration: none;
}

.navBarContainer .btn:hover {
  cursor: pointer;
  background-color: white;
  color: black;
}

.btn .btnText {
  display: block;
  color: white;
  text-decoration: none;
  transition: color .75s;
  -o-transition: color .75s;
  -moz-transition: color .75s;
  -webkit-transition: color .75s;
}

.btn:hover .btnText {
  color: black;
}

.dropDown {
  display: flex;
  visibility: hidden;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  top: 100%;
  opacity: 0;
  background: black;
  width: 25vw;
  max-width: 25%;
  z-index: 10;
  transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}

.dropBtn {
  background: black;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}

.dropBtn:hover {
  background: white;
}

.dropBtn:hover > .dropBtnText {
  color: black;
}

.dropBtnText {
  color: white;
  text-decoration: none;
}

JS：

$(function () {
    $('#btnHover').hover(function () {
        document.getElementById('photography').style.visibility = 'visible';
        document.getElementById('photography').style.opacity = 0;

        var opacity = 0;
        function fadeIn() {
            if (opacity < 1) {
                opacity += .1;
                setTimeout(function () { fadeIn() }, 75);
            }
            document.getElementById('photography').style.opacity = opacity.toString();
        }
        document.getElementById('photography').style.opacity = 1;
    },
        function () {
            document.getElementById('photography').style.opacity = 1;
            function fadeOut() {
                alert("test2");
                if (opacity > 0) {
                    opacity -= .1;
                    setTimeout(function () { fadeOut() }, 75);
                }
                document.getElementById('photography').style.opacity = opacity.toString();
            }

            document.getElementById('photography').style.visibility = 'hidden';
            document.getElementById('photography').style.opacity = 0;
        });
})

JSFiddle：https://jsfiddle.net/x1hkL589/10/

Javascript完全跳过脚本中的函数

0 个答案: