jQuery动画不适用于我的导航栏

Question

我的页面顶部有一个导航菜单，由列表项组成。我想应用jQuery代码使列表项在我的页面加载时逐个向下滑动...无法使其工作。

index.html

<div class="container">
  <ul>      
      <a href="#"><li id="goFirst">Projects</li></a>
      <a href="#"><li id="goSecond">Contact</li></a>
      <a href="#"><li id="goThird">Blog</li></a>
  </ul>
</div>

的script.js

$(document).ready(function() {
    $('#goFirst').animate({top: '+=75px'}, 1000);
    $('#goSecond').delay(1000).animate({top: '+=75px'}, 1000);
    $('#goThird').delay(2000).animate({top: '+=75px'}, 1000);
});

Answer 1

使用marginTop代替top。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#goFirst').animate({
    marginTop: '+=75px'
  }, 1000);
  $('#goSecond').delay(1000).animate({
    marginTop: '+=75px'
  }, 1000);
  $('#goThird').delay(2000).animate({
    marginTop: '+=75px'
  }, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li id="goFirst">
      <a href="#">Projects</a>
    </li>
    <li id="goSecond">
      <a href="#">Contact</a>
    </li>
    <li id="goThird">
      <a href="#">Blog</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;