2015年7月22日

画像一枚で簡単ホバー

マウスオーバーした際のホバー処理です。
画像にclassを与えることで半調にする処理ができます。

<script type="text/javascript">
    $(function(){
        $('.fade_over').hover(function(){
            $(this).stop().animate({opacity:'0.5'},0);
            },function(){
            $(this).stop().animate({opacity:'1'},0);
        });
    });
</script>

<a href="#"><img src="####" alt="" class="fade_over" /></a>

 opacitの数値で不透明度が変わります。
0.0…完全に透明 0%
0.5…半調 50%
1.0…完全に不透明 100%

opacitの初期値は1.0です。

0 件のコメント:

コメントを投稿

ドメインって、早い者勝ちですよ!