0

このコードを使用すると、一部のアイコンがmouseenterで不透明度1.0にフェードし、mouseleaveで0.3に戻ります。これらのアイコンを別のレスポンシブビューで不透明度0.13に設定していることを除けば、うまく機能しますが、以下のコードでは、マウスアウトで0.13ではなく0.3にフェードバックします。これは私が望むものではありません。

$(".social-holder img").on("hover", function(e) {
    if(e.type == "mouseenter") {
        $(this).fadeTo('fast', 1.0);
    }
    else if (e.type == "mouseleave") {
        $(this).fadeTo('fast', 0.3);
    }
});

以下のコードを試しましたが、なぜ機能しないのか理解できません。マウスリーブ時にアイコンを1.0のままにします

$(".social-holder img").on("hover", function(e) {
    var currentOpacity = $(this).css('opacity');
    if(e.type == "mouseenter") {
        $(this).fadeTo('fast', 1.0);
    }
    else if (e.type == "mouseleave") {
        $(this).fadeTo('fast', currentOpacity);
    }
});

ちなみに、コンソールで確認したところ、var currentOpacityは正常に機能しているようですが、elseifステートメントの中には入っていないようです。多分私はスコープか何かについていくつかの誤解を持っています。

4

1 に答える 1

1

ハンドラーが呼び出されるたびに変更されるため、コードは機能しませんcurrentOpacity。したがって、マウスを離すと、このコードが実行されます。

 var currentOpacity = $(this).css('opacity');
 $(this).fadeTo('fast', currentOpacity);

これは何もしないための手の込んだ方法です:-)

代わりに次のコードを使用してください。

if(e.type == "mouseenter") {
    // Either preserve the saved value or get current opacity
    var origOpacity = $(this).data('origOpacity') || $(this).css('opacity');
    $(this).fadeTo('fast', 1.0).data('origOpacity', origOpacity);
}
else if (e.type == "mouseleave") {
    var origOpacity = $(this).data('origOpacity');
    $(this).fadeTo('fast', origOpacity, function(){ $(this).removeAttr('style'); });
}

これにより、要素のデータマップに入力する際の不透明度が保存され、そこから元に戻ります。

于 2013-01-23T17:24:54.670 に答える