2

ページの上部にメニューがあり、背景に黒色のオーバーレイが必要でopacity = 0.7、この「オーバーレイ」はli:hover( mouseenter) で表示され、で消える必要がありmouseleaveます。これは私がこれまでに行ったことであり、これはフルスクリーンの結果です

私が得たもの：

  1. mousenterうまくいきます。
  2. mouseleave問題、マウスが離れるたびにオーバーレイが表示されたり消えたりします（パーティーが点滅するdivのようです）、ロジックはわかっていますが、どうすればよいですか？

コード内のいくつかの行にコメントを付けると、必要なものが表示されますが、オーバーレイは表示されたままになります。

function iniciarmenu() {
    $(".menu-links ul li").hover(

    function () {
        $(".overlay").animate({
            opacity: 0.7
        }, 'fast');
    },

    function () {
        /*$(".overlay").animate({
            opacity: 0
        }, 'fast');*/
    });
}

あなたが私を助けてくれることを願っています。ありがとう！

4

1 に答える 1

4

最初に現在のアニメーションを停止する必要があります。

 $(".overlay").stop( true, true ).animate( { … } );

参照: http://api.jquery.com/stop/

CSS を使用してその効果を実現することもできます。

.overlay:hover {
    opacity: .7;
    -webkit-transition: opacity .2s;
       -moz-transition: opacity .2s;
         -o-transition: opacity .2s;
            transition: opacity .2s;
}
于 2013-09-27T23:43:27.257 に答える