1

私はulメニューを持っています：

<ul>
    <li class="one"><a href="#">Link One</a></li>
    <li class="two"><a href="#">And Two</a></li>
    <li class="three"><a href="#">Then it's Three</a></li>
    <li class="four"><a href="#">Finally Four</a></li>
<ul>

アンカーの上にカーソルを合わせると、背景が左からスライドインし、マウスを離すと元に戻りますが、テキストの位置は静的なままです。おそらく背景画像を使ってこの作業を簡単に行うことができますが、 の幅liを 0 に設定し、aをいくつかの設定幅に設定してから、とjQueryの親の幅をアニメーション化することでできると思いliました。mouseovermouseout

$('a').mouseover(function(){
    $(this).parent().stop().animate({
        width: 270
    }, 200);
});
$('a').mouseout(function(){
    $(this).parent().stop().animate({
        width: 0
    }, 200);
});

幅を設定するか、css を介して設定すると、正常に動作しますが、実際にはスライドが奇妙な結果を引き起こします: http://jsfiddle.net/LeonardChallis/D67dM/

私の質問は次のとおりです。これを適切に機能させるには何を変更する必要がありますか、またはそれを完全に行うためのより良い方法はありますか? 私は必ずしも背景画像の方法を気にしているわけではありませんが、それがなぜ最善なのか、および/または他の方法がなぜ悪いのかを教えていただければ幸いです。

4

1 に答える 1

1

いくつかのことを変更することで、この結果を達成できることがわかりました。に があり、mouseenterのaではなくmouseoutにa変更しmouseleaveましたli。も に設定aしposition: fixed;ます。

$('a').mouseenter(function(){
    console.log('mouseenter');
    $(this).parent().stop().animate({
        width: 270
    }, 200);
});
$('li').mouseleave(function(){
    console.log('mouseleave');
    $(this).stop().animate({
        width: 0
    }, 200);
});

更新されたフィドルは、それが非常にうまく機能していることを示しています。

于 2013-07-19T08:11:26.203 に答える