jQueryで遊んでみるその4 ‹ CamCam

Home » Misc » jQueryで遊んでみるその4

jQueryで遊んでみるその4

Posted by: かむ Posted date: 4月 30, 2010 | 3 Comments

ツイート

←その3

fadeTo()というエフェクトを使って簡単なロールオーバーを作ってみた。
↓カーソルを合わせてみて

ソースはこんなんで、その3とほとんど同じ。
今回はclass=""で指定。

<script type="text/javascript">
 
$(function(){
    $(".mover").mouseover(function() {
      $(this).fadeTo("normal", 0.2);
    });
 
    $(".mover").mouseout(function() {
     $(this).fadeTo("normal", 1);
   });
 
});
 
</script>
 
<img src="1.png" alt="" class="mover" />
<img src="1.png" alt="" class="mover" />

class="mover"と言うクラスを指定したエレメントは全部フェードのかかったロールオーバーになる。

fadeTo("normal", 1)
括弧内最初はスピード、2番目は透過率なのでお好みでどうぞ。

関連エントリ

3 Comments

Kawa 2010/05/01 01:23

クラス指定じゃなくaタグの中のimg（class指定なし）に付けるには？
薄い→濃いへのフェードも出来るんですよね？
と、質問攻め（笑

かむ 2010/05/01 09:06

Kawaさん

CSSと同じで良いので
$(“a img”) でいけるよ。(リンク画像全部にかかちゃうけど。)

まとめるとこんなん。
http://camcam.info/sample/1301/index.html

かむ 2010/05/01 13:49

Kawaさん
一部訂正(汗
読み込みの記述が余分だった。

http://camcam.info/sample/1301/index.html

ここのソース見て

Writen by CamCam