memocarilog

画像やテキストのホバー時にふわっと透明度を変えて、ロールオーバー効果を付けるjQueryのコードです。

以下のデモのようなエフェクトをかける事ができます。

See the Pen ホバー時にふわっと透明度を変えるjQueryのコード by Saomocari (@Saomocari) on CodePen.

下記のようにヘッダー内に記入します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hover_img").hover(
//↑.hover_imgはアニメーションを付けたい要素を指定します。
function(){
     $(this).stop(true, true).fadeTo(300,0.5);
     //↑ここでの設定はカーソルを乗せたときの動き
     //最初の指定でスピード指定、二番目の指定で透明度の指定
},
function(){
    $(this).stop(true, true).fadeTo(300,1.0);
     //↑ここでの設定はカーソルが離れたときの動き
     //最初の指定でスピード指定、二番目の指定で透明度の指定
});
});
</script>