Web制作メモ -トップへ-

[jQuery] マウスオーバーで半透明化

JavaScript2015.02.03 15:42

マウスオーバーで半透明化する方法です。

フェード効果を付けて半透明化する場合、fadeTo()を使います。こちらはふわっとした印象になります。

フェード効果を付けずに半透明化する場合、CSSのopacityを使います。こちらは、シャキッとした印象になります。

ふわっと半透明化

$(document).on('mouseenter', '.hover', function(){
    $(this).fadeTo('fast', 0.5);
});
$(document).on('mouseleave', '.hover', function(){
    $(this).fadeTo('fast', 1);
});

.hoverクラスを半透明化しています。

fadeToの第一引数はフェードする速度です。fast、normal、slowから選べます。

第二引数は透明度で、1が不透明、0で透明、0.5でちょうど半透明です。

シャキッと半透明化

$(document).on('mouseenter', '.hover', function(){
    $(this).css('opacity', '0.5');
});
$(document).on('mouseleave', '.hover', function(){
    $(this).css('opacity', '1');
});

CSSのopacityを使って半透明化しています。

こちらの方法はフェード効果がなく瞬時に切り替わります。

CSSで書いても同様の事が出来ますが、jQueryで書くと自動的にクロスブラウザ対応してくれます。