2

だから私はナビゲーションを持っており、jQueryのUIアニメーションを使用して、リスト項目をビューの外にスライドさせ、色を変更してからスライドして元に戻し、ボタンを別の色で表示します。

私が得ている問題は、リスト項目にカーソルを合わせるたびに、マウスが離れるまでホバーイベントが継続的にトリガーされることです。

さらに奇妙なことに、マウスが実際にリスト項目を離れたかどうかに関係なく、hover イベントの直後に mouseleave イベントがトリガーされるように見えます。これは、hover または mouseenter を使用した場合に発生します。

ここに私が持っているものがあります: HTML:

<nav>
    <ul>
        <a href="index.html"><li>Home</li></a>
        <a href="services.html"><li>Services</li></a>
        <a href="portfolio.html"><li>Portfolio</li></a>
        <a href="contact.php"><li>Contact</li></a>
        <a href="about.html"><li>About</li></a>
    </ul>
</nav>

jQuery:

$("nav li").mouseenter(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','orange');$(this).css('color','#fff');});
        $(this).animate({bottom:"-0px"},"fast");
    }).mouseleave(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','white');$(this).css('color','#333');});
        $(this).animate({bottom:"-0px"},"fast");
    });

CSS:

nav{
float:right;
margin-top:91px;
}
nav ul, nav ul li{
display:inline;
}
nav li{
margin-left:10px;
position:relative;
padding:5px 20px;
color:#A29874;
background-color:#fff;
border-top-right-radius:5px;
border-top-left-radius:5px;
 }

nav a{
position:relative;
text-decoration:none;
 }

リスト項目の 1 つにマウスを非常にゆっくりと近づけると、目的の効果を得ることができます。比較的簡単なはずのこの作業に、私は頭がおかしくなりました。

私はネットを精査し、mouseenter イベントのバインドを解除するなどのことを試しました。条件を使用して、mouseleave イベントが無効になった後にのみアニメーションを実行します。

できれば私がハゲになる前に、どんな提案でも大歓迎です。ありがとう！

4

2 に答える 2

2

問題の理由は、要素を移動しているため、マウスの下にないことです。したがって、明らかmouseleave()にトリガーされます。タグのホバー時にアニメーションをトリガーすることでこれを回避できますが、アニメーションで をaターゲットにliします。参照: http://jsfiddle.net/aN4g4/50/

これがあなたの新しいjsです：

$("nav a").mouseenter(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'orange','color':'#fff'});
        });
    $li.stop(true,true).animate({bottom:"-0px"},"fast");
}).mouseleave(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'white','color':'#333'});
        });
    $li.animate({bottom:"-0px"},"fast");
});

アニメーションが終了した後に起動するコールバック関数が少し最適化されていることに気付いたかもしれません。この方法で複数の CSS プロパティを渡すことができます。.css({'prop1':'val1','prop2':val2'})また、コードを最適化したので、多くの jQuery オブジェクトが生成されるのは遅いためです。（行に注意してvar $liください。）

于 2011-05-24T13:26:08.060 に答える
0

あなたliを次のように設定してみてくださいposition: relative;

私はあなたのコードを「貼り付け」、相対的なあなたのものを設定するだけです<li>

結果は少し面白かったです。

ここを参照してください： http://jsfiddle.net/aN4g4/47/

于 2011-05-24T13:07:52.393 に答える