javascript - jQuery Animate 内联样式问题

Question

我无法修复代码中的一个错误。我在单击上/下滑动 div 时创建，但是当我非常快地单击它 4 次时，我的 css 最高值是高度和功能停止工作。你能给我一些解决方案或其他方法来处理这个问题吗？

代码如下:

$(function() {
  $(".nav li a").click(function(event) {
    var page = $(this).attr("href")
    var topVal = $("#about").css("top")

    if (topVal != "-500px") {
      $(page).animate({
        top: "-=500"
      }, 500).css("top", "-500px")
    } else {
      $(page).animate({
        top: "+=500"
      }, 500)
      event.preventDefault()
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
  <li><a href="#about">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
</ul>
<!--  About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>

Answer 1

这是你想要的吗？

$(function() {
  $(".nav li a").click(function(event) {
    var page = $(this).attr("href")
    var topVal = $("#about").css("top")

    if (topVal != "-500px") {
      $(page).animate({
        top: "-=500"
      }, 500).css("top", "-500px")
    } else {
      $(page).animate({
        top: "+=500"
      }, 500)
      event.preventDefault()
    }
  });
});

section { position: relative; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
  <li><a href="#about">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
</ul>
<!--  About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>

我认为这样更好:

$(function() {
  $(".nav li a").click(function(event) {
    var href=$(this).attr('href');
    $(href).toggleClass('offscreen');
    event.preventDefault()
  });
});

section { position: relative; transition: 0.5s all; top:0 }
.offscreen { top: -500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
  <li><a href="#about">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
  <li><a href="#">Start</a>
  </li>
</ul>
<!--  About Page-->
<section id="about" class="container-fluid col-md-9 offscreen">About
</section>