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。更大的'李'擴大你的'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'}) 
});