使用jquery悬停菜单时，在ouside div中移动图像

我在菜单中有5个元素，在这下面有一小行图像，它的移动取决于你悬停的元素。默认情况下，它位于当前网站下，因此可以从5个元素中的任何一个开始

所以，如果你将某个东西悬停，它就会移动到那个地方，如果你停止悬停菜单，它就会回到当前状态。但如果将其他元素悬停在当前元素之前，它将直接指向该点

所有菜单都具有id开头的相同部分，例如#fxmenu_1。从1到5，我认为只获取id的编号并避免写入5个jquery更快

我试了一下，但是我的jquery有点问题

$(document).ready(function(){
var id;
    $('#fxmenu_'+id+':not(.totalactive)').hover(function (){
        $('#img').animate({"marginTop": "-70px"},1000, function(){
            $('#img').animate({"marginLeft":+(180*id)+"px"},1000, function(){
                $('#img').animate({"marginTop": "-90px"},1000);
                });
        });
    });
});

在这里，您可以看到我的示例：

这是另一次尝试

$(document).ready(function(){
var id,
    hovermenu = $('#fxmenu_'+id);
    $(hovermenu).hover(function (){
        $('#img').animate({marginTop: "-70px"},1000, function(){
            $('#img').animate({marginLeft:+(180*id)+"px"},1000, function(){
                $('#img').animate({marginTop: "-90px"},1000);
            });
        });
    }, function() {
        $('#img').removeAttr('style');

    });
});

---

我可以建议使用这个javascript插件吗

它具有您试图重新创建的功能。为什么要尝试重新创建车轮

编辑1

无论如何，如果你确实想用你的代码做到这一点，这里有一个返工

HTML

<div id="pmenu">
    <ul id="bmenul">
        <li><a class="brand" id="fxmenu1_" href="/">LOGO</a> </li>
        <li class="active"><a id="fxmenu_2"  href="/team" title="team">The team</a> </li>
        <li><a id="fxmenu_3" href="/services" title="Servicios">Services</a> </li>
        <li><a id="fxmenu_4" href="/projects" title="Proyectos">Projects</a> </li>
        <li><a id="fxmenu_5" href="/contact" title="Contacto">Contact</a> </li>
    </ul>
    <div id="bar">
        <div id="img"></div>
    </div>
</div>

CSS

。。。
#img{
最大高度：180像素；
宽度：180px；
边框底部：2倍实心#000000；
显示：无；
}

---

代码中的id

未定义。您可以使用类而不是id。在代码中，您有以下问题1.id未定义且没有指定值。2.你的菜单“fxmenu1_uu1”类似于这样，在你的脚本中，你使用了“#fxmenu1”+id。是的，当然，但是对于类，我无法想象我能做些什么让jquery猜出我在悬停什么。我想获取菜单的任何id的编号，以便将其用于脚本。看看我写的另一段代码，肯定是这样的，但不知为什么javascript找不到ID。这是我的网站。.totalactive类由php定义。www.bluenz.com这真是太棒了（讽刺），我用我真正的div更改了你的JSFLIDE，它在那里工作，然后我复制到我的网站上，什么都没发生。。。看看你的网站，我可以看到它在IE、Chrome和Firefox中为我工作。你还对此有意见吗？

$(document).ready(function() {
    var activeIndex = $('#bmenul > li.active').index();

    $('#img').css({
        'marginLeft': (180 * activeIndex) + 'px'
    }).show();

    $('#bmenul > li').not('.active').hover(function() {
        var index = $(this).index();
        $('#img').stop().animate({
            'marginLeft': (180 * index) + 'px'
        }, 400);
    }, function() {
        $('#img').stop().animate({
            'marginLeft': (180 * activeIndex) + 'px'
        }, 400);
    });
});​