我只是想将 .icon 移到右侧。尝试按position().left的量对.icon进行动画处理
我的代码无法运行，我不知道为什么。我敢打赌它非常简单!!
<script>
$("li.menu-item").hover(function(){
var pos = $(this).position().left;
$(".icon").animate({left : pos+'px'}, 1500 );
});
</script>
</head>
<body>
<div id="menu-wrapper">
<ul id="main-nav">
<li class="menu-item"><a href="">Blog</a></li>
<li class="menu-item"><a href="">Sponsored</a></li>
<li class="menu-item"><a href="">Facebook</a></li>
<li class="menu-item"><a href="">Twitter</a></li>
<li class="menu-item"><a href="">About</a></li>
<li class="menu-item"><a href="">Contact</a></li>
</ul>
<div class="icon">move please</div>
</div><!-- //END menu-wrapper -->
</body>
CSS
#menu-wrapper { position: fixed; bottom: 50px; margin: 0 auto; text-align:center;}
.icon {
width: 9px;
height: 9px;
background: url(../images/plus-menu.png) no-repeat 0 0;
position: absolute;
left: -5px;
bottom: -4px;
}
#main-nav { line-height: 1.0; float: left; margin-bottom: 1em; }
#main-nav{list-style: none;}
#main-nav li a {
display: block;
position: relative;
text-decoration: none;
margin-right: 20px;
color: #b2b2b2;
line-height: 19px;
padding-bottom: 17px;
}
#main-nav li { float: left; position: relative; }
#main-nav li a:hover, #main-nav li a:active { color: #404040; }
任何帮助都会很棒
谢谢
最佳答案
将代码包装在 $(document).ready()
<script>
$(document).ready(function()
{
$("li.menu-item").hover(function(){
var pos = $(this).position().left;
$(".icon").animate({left : pos+'px'}, 1500 );
});
});
</script>
检查这个beginner tutorial获取更多信息
关于jquery - 对 jquery 非常陌生 - 为什么这不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7630117/