Question

所以我希望div（菜单）在到达某个点时从右边滑出，在这种情况下是另一个div。我可以让它滑出来，但是当我超过div时它不会隐藏，我尝试添加另一个if语句，但这并不能使它滑出。

＆＃13;

< script >
  $(document).ready(function() {
    var topOfOthDiv = $("#show").offset().top;
    $(window).scroll(function() {
      if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        var div = $(".sidemenu");
        div.animate({
          right: '25%'
        }, "slow");
      } else if ($(window).scrollTop() < topOfOthDiv) {
        var div = $(".sidemenu");
        div.animate({
          right: '0%'
        }, "slow");
      }
    });
  }); <
/script>

＆＃13;

body {
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  color: #e2e2e2;
}

.menu {
  position: absolute;
  width: 100%;
  text-align: center;
  text-transform: lowercase;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
}

.sidemenu {
  position: fixed;
  top: 5%;
  right: 0%;
}

.sidemenu ul {
  position: absolute;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(1, 1fr);
}

.sidemenu ul li {
  list-style: none;
  transition: .5s;
}

.sidemenu ul li a {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 15px;
  display: block;
  padding: 50px;
  text-transform: uppercase;
  text-decoration: none;
  color: #262626;
  white-space: nowrap;
  transition: .5s;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: colours;
  -webkit-animation-timing-function: ease;
  letter-spacing: 3px;
}

h1 {
  font-size: 50px;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

h2 {
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

.menu ul {
  position: absolute;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  left: 50%;
  transform: translate(-50%);
}

.menu ul li {
  list-style: none;
  transition: .5s;
}

.menu ul li a {
  font-family: 'Montserrat', sans-serif;
  display: block;
  padding: 80px;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #262626;
  white-space: nowrap;
  transition: .5s;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: colours;
  -webkit-animation-timing-function: ease;
  letter-spacing: 3px;
}

@-webkit-keyframes colours {
  0% {
    background: #39f;
    color: antiquewhite;
  }
  15% {
    background: #8bc5d1;
    color: black;
  }
  30% {
    background: #f8cb4a;
    color: black;
  }
  45% {
    background: #95b850;
    color: black;
  }
  60% {
    background: #944893;
    color: antiquewhite
  }
  75% {
    background: #c71f00;
    color: antiquewhite;
  }
  90% {
    background: #bdb280;
    color: black;
  }
  100% {
    background: #39f;
    color: antiquewhite;
  }
}

@-webkit-keyframes text {
  0% {
    color: #39f;
  }
  15% {
    color: #8bc5d1;
  }
  30% {
    color: #f8cb4a;
  }
  45% {
    color: #95b850;
  }
  60% {
    color: #944893;
  }
  75% {
    color: #c71f00;
  }
  90% {
    color: #bdb280;
  }
  100% {
    color: #39f;
  }
}

.menu ul li:hover {
  transform: translateY(-8%);
}

section {
  text-align: left;
  font-size: 20px;
}

section div {
  width: 80%;
  margin-left: 10%;
}

section a {
  text-decoration: none;
  color: #e2e2e2;
}

.spacer {
  height: 100%;
  width: 100%;
}

.spacer2 {
  height: 10%;
  width: 100%;
}

#particles-js {
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
}

#datecount {
  font-size: 25px;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

＆＃13;

这是一个片段，它在这里没有正常工作，但它可以完成这项工作

Answer 1

您遇到的问题是您多次运行.animate()，并且最终会同时运行许多动画。下面是它的工作，有一个额外的moving变量，可以阻止动画同时播放多次。

$(document).ready(function () {
    var moving = false;
    var topOfOthDiv = $("#show").offset().top;
    $(window).scroll(function () {
        if(moving) return; // dont trigger it twice
        moving = true;
        if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            var div = $(".sidemenu");
            div.animate({ right: '25%' }, "slow", undefined, function() {
                moving = false; //reset this
            });
        } else if ($(window).scrollTop() < topOfOthDiv) {
            var div = $(".sidemenu");
            div.animate({ right: '0%' }, "slow", undefined, function () {
                moving = false; //reset this
            });
        }
    });
});

当它到达另一个div时，如何使div滑出并进入

1 个答案: