1

不透明効果を作成するためのこれらの2つの機能があります

<script>
    function trans(id)
    {
       $(".pris_"+id).stop().fadeOut(1000);
       $(".pris_"+id).css({ opacity: 0.1});
       stop();
    }

    function trans_reverse(id)
    {
       $(".pris_"+id).stop().fadeIn(1000);
       $(".pris_"+id).css({ opacity: 0.8});
       stop();
    }
</script>


<div id="productos_image_soon" class="pris_1"    onmouseover="trans('1');"onmouseout="trans_reverse('1');">
   Product in a few time
</div>

各関数を呼び出すdivに、問題は、常にdivの上にマウスを置き、再帰モードで2番目の関数を実行し、最初の関数の後に実行を続けると、マウスオーバーの不透明度が低くなり、マウスアウトの不透明度が大きくなることです。

作業中.....ここjsfiddle.net/dSesq/

なぜこれが発生するのかわかりません。stop（）関数を試しましたが、問題は解決しません。

4

1 に答える 1

4

要素をフェードインした後に要素の不透明度を設定する理由は意味がありません。fadeTo を使用してください。

function trans(id, opacity) {
    $(".pris_"+id).stop().fadeTo( 1000, opacity);
}

そして、おそらくmouseenterとmouseleaveを使用する必要があります。また、消える要素の上にマウスを置くと、奇妙な結果が得られます。

あなたのコードは次のように書くことができます

$(".trigger").on("mouseover mouseout", function(evt){
    var opacity = evt.type=="mouseover" ? 1 : .8;
    $(this).stop().fadeTo(1000, opacity);    
})
于 2013-02-13T14:15:03.050 に答える