javascript - jQuery 菜单无法正常工作

Question

我试图让一个jQuery菜单工作，它悬停在每一个项目上。这是小提琴代码！. 你可能会在结果中看到什么。当我悬停一项时，所有项目都会受到影响。我的错误在哪里？

这是javascript代码：

$(document).ready(function(){

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'200px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'140px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

如果其余的也是必要的，请查看小提琴代码。

Answer 1

这是关于 CSS 的。更大的 'li' 扩展了你的 'ul'。尝试这个：

$(document).ready(function(){

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({marginTop:'-60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({marginTop:'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});​

http://jsfiddle.net/VpQkE/

Answer 2

打开它时，您需要设置一个负的上边距。虽然这可能证明 lis 浮动存在问题。

 //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({'height':'200px','margin-top':'-60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

//When mouse is removed
$("li").mouseout(function(){
    $(this).stop().animate({'height':'140px','margin-top':'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});