javascript - jQuery 菜单无法正常工作

Question

我正在尝试让 jQuery 菜单正常工作，它会悬停在每个元素上。这是 fiddle code! .您可能会在结果中看到什么。当我悬停一个元素时，所有元素都会受到影响。我的错误在哪里？

这是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'})
    });

});

如果还需要其他的请看fiddle code.

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/