jQuery Animate内联样式问题

Question

我无法修复代码中的一个错误。我创建了点击向上/向下滑动div，但是当我点击它4次非常快我的css顶部值是高度和功能停止工作。你能告诉我一些解决方案或其他方法来解决这个问题吗？

这是代码：

CLLocationManager

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

Answer 1

这是你想要的吗？

＆＃13;

＆＃13;

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

＆＃13;

section { position: relative; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我认为这更好：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;