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/

Answer 2

打开它时，您需要设置负的上边距。虽然这可能会成为问题，因为这是浮动的。

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

jQuery菜单无法正常工作

2 个答案: