超簡単!画像をマウスオーバーすると半透明になるjQuery

このサイトでもつかっているのですが
リンクボタンなどで
マウスオーバーしたときに
画像が半透明になるjQueryスクリプトを紹介します。

ソースはすごく簡単なので
覚えておいてくださいね。

ソース

1
2
3
4
5
6
7
8
$(document).ready(
  function(){
    $("a img") .hover(function(){
       $(this).fadeTo("4000",0.3); // マウスオーバーで透明度を30%にする
    },function(){
       $(this).fadeTo("4000",1.0); // マウスアウトで透明度を100%に戻す
    });
  });

開設

セレクター($のカッコの中のCSS)に
効果を出したいCSSを設定します。
例の部分はすべてのリンク付き画像を対象にしています。

「fadeTo(“4000”,0.3)」の
4000はエフェクトのスピード、
0.3は透明度です。

これで、あなたのサイトは
ちょっと一味ちがうサイトになるにちがいありません。

やさしくはじめるWebデザイナーのためのjQueryの学校

新品価格
¥2,604から
(2013/5/19 19:52時点)

jQueryを勉強するなら、この本がオススメです。