-1

好吧，我在一个菜单中有 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);
                });
        });
    });
});

在这里你可以看到我的例子：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');

    });
});
4

1 回答 1

0

我可以建议使用这个 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;
}

演示

于 2012-12-03T04:08:03.547 回答