jQuery-Menü funktioniert nicht richtig

Question

Ich versuche, ein jQuery-Menü arbeiten, die jedes einzelne Element schwebt. Hier ist die fiddle code!. Wie Sie wahrscheinlich im Ergebnis sehen werden. Wenn ich einen Gegenstand schwebe, sind alle betroffen. Wo ist mein Fehler? Hier

ist der Javascript-Code:

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

}); 

Wenn der Rest auch notwendig ist, nehmen Sie bitte einen Blick auf den fiddle code.

Answer 1

Es geht um CSS. Größere 'li' erweitert deine 'ul'. Versuchen Sie folgendes:

$(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

Sie werden einen negativen oberen Rand festlegen müssen, wenn Sie es öffnen oben. Obwohl das problematisch sein könnte, wenn die Lis schwimmt.

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