1

我正在尝试创建一个导航，它使用悬停来上下移动导航按钮，这很有效。当我单击以选择一个按钮时，我希望悬停停止，这很有效。当我在导航中选择另一个按钮时，如何将悬停动画绑定回来？截至目前，它保持无界，并且所有按钮在单击时都变为无界。一个foreach（）？

自从我使用 jQuery 以来已经有一段时间了，需要一点帮助。

另外，我首先使用了 mouseOver() 和 mouseOut() 并且读到悬停更好用。它是否正确？

让小提琴正确运行，这可以让您在不使用图像的情况下获得更好的想法。 http://jsfiddle.net/cs_what/WP9TT/

4

1 回答 1

2

事件委托可以使这变得容易。

google.load("jquery", "1.6.2");
google.setOnLoadCallback(function(){
    $(".horzNavigation").delegate("ul > li > a:not(.active)",{
        "mouseenter": function(){
            $(this).stop(true,true).animate({"top": "-=60px"}, 250, 'swing');
        },
        "mouseleave": function(){
            $(this).stop(true,true).animate({"top": "+=60px"}, 250, 'swing');
        }
    }).delegate("ul > li > a","click",function(event){
        $(this).addClass('active').parent().siblings().children('.active').removeClass('active');
    });
});

另外，我假设您的代码中有错字，ul元素不能直接包含锚标签，所以我在li标签中添加了选择器。无效的 html 在不同的浏览器中可能会产生不一致的结果。

于 2012-08-07T20:47:44.373 回答