jQueryで遊んでみる その4

4月 30th, 2010

←その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番目は透過率なのでお好みでどうぞ。

Related Posts

3 Comments

  • Kawa

    5月 st, 2010 1:23 AM

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

  • かむ

    5月 st, 2010 9:06 AM

    Kawaさん

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


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

  • かむ

    5月 st, 2010 1:49 PM

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

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

    ここのソース見て