0

すべてのアイテムをホバリングするjQueryメニューを機能させようとしています。これがフィドルコードです！。結果にどのように表示されるか。1つのアイテムにカーソルを合わせると、すべてが影響を受けます。私の間違いはどこにありますか？

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

});

残りも必要な場合は、フィドルコードを見てください。

4

2 に答える 2

2

それは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/

于 2012-04-11T19:13:36.387 に答える
0

あなたがそれを開くとき、あなたは負のトップマージンを設定する必要があるでしょう。それは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'})
});
于 2012-04-11T19:12:25.623 に答える