[英]jQuery animation doesn't work for my navbar
I have a navigation menu on top of my page made out of list items. 我的页面顶部有一个由列表项组成的导航菜单。 I want to apply jQuery code to make the list items to slide down one by one when my page loads...Can't get it work.
我想应用jQuery代码来使列表项在页面加载时一一下滑...无法正常工作。
index.html 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 script.js
$(document).ready(function() {
$('#goFirst').animate({top: '+=75px'}, 1000);
$('#goSecond').delay(1000).animate({top: '+=75px'}, 1000);
$('#goThird').delay(2000).animate({top: '+=75px'}, 1000);
});
Use marginTop
instead of top
. 使用
marginTop
代替top
。
$(document).ready(function() { $('#goFirst').animate({ marginTop: '+=75px' }, 1000); $('#goSecond').delay(1000).animate({ marginTop: '+=75px' }, 1000); $('#goThird').delay(2000).animate({ marginTop: '+=75px' }, 1000); });
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.