如何使 div 在到达另一个 div 时滑出和滑入

Question

所以我希望一个div(菜单(在到达某个点时从右侧滑出，在这种情况下是另一个div。 我可以让它滑出，但是当我在div 上方时，它不会隐藏回来，我尝试添加另一个 if 语句，但这甚至没有让它滑出。

< 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>

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;
}

这是一个片段，它在这里无法正常工作，但它可以完成工作

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
});
}
});
});