对 jquery 非常陌生 - 为什么这不起作用

发布于 2024-12-08 00:19:39 字数 1644 浏览 0 评论 0原文

我只是想将 .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; }

任何帮助都会很棒

谢谢

原文

I simply want to shift the .icon to the right. trying to animate .icon by the amount of position().left

My code isn't working and I don't know why. I bet its very simple!!

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

Any help will be great

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里兽 2024-12-15 00:19:39

将代码包装在 $(document).ready() 中

<script>
$(document).ready(function()
{
    $("li.menu-item").hover(function(){
        var pos = $(this).position().left;
        $(".icon").animate({left : pos+'px'}, 1500 );

    });
});
</script>

，查看此初学者教程获取更多信息

Wrap your code in $(document).ready()

<script>
$(document).ready(function()
{
    $("li.menu-item").hover(function(){
        var pos = $(this).position().left;
        $(".icon").animate({left : pos+'px'}, 1500 );

    });
});
</script>

Check this beginner tutorial out for more info

回复收藏 0 原文