Question

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

因此，如果你将某些东西移动到那个位置，如果你停止悬停菜单，它会回到当前状态。但是如果你在当前之前悬停其他元素，它就会直接进入那一点。

所有菜单都与id的开头部分相同，例如＃fxmenu_1。从1到5，我认为只需要获取id的数量就可以更快，并且避免写入5个jquerys。

我尝试了一下，但我的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);
                });
        });
    });
});

在这里，您可以看到我的示例：http://jsfiddle.net/rzJMv/1/

这是另一次尝试

$(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');

    });
});

Answer 1

我建议使用这个javascript插件吗？
http://www.scriptiny.com/2008/05/sliding-javascript-menu-highlight-1kb/

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

修改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>

Javascript

$(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);
    });
});

<强> CSS

...
#img {
    max-height: 180px;
    width: 180px;
    border-bottom: 2px solid #000000;
    display: none;
}

<强> Demo

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

1 个答案: