マウスオーバーのクロスフェード効果jQueryと少しのJSで実装

1.　ヘッダにjQuery本体を読み込む

<script type="text/javascript" src="js/jquery.js"></script>
2.　jQueryの処理を記述する
$(document).ready( <script> $(document).ready( function(){ $(".fadeOff img").hover(function(){ $(this).stop(true,true).animate({'opacity':0},300);//マウスオーバーで透明度0％ },function(){ $(this).stop(true,true).animate({'opacity':1},300);//マウスアウトで透明度100％ }); }); </script>  <br>
3.CSS
.fadeOn{ position:relative; width:画像の幅px; height:画像の高さpx; top:0; left:0; display:block; } .fadeOff { position:absolute; top:0; left:0; display:block; }
4.html
<div class="fadeOn"> <a href="#"><img src="ホバー後画像" /></a> <div class="fadeOff"> <a href="#"><img src="ホバー前画像" /></a> </div> </div>

jQueryの部分で.stop(true,true)を付ける事でホバーした分だけoapcityが
効いてしまうことを防ぐ。
詳しくは参考サイト：[jQuery]こんな機能があったんだ。jQuery stop()

※あと画像を２枚使ってクロスフェードさせているが、１枚画像に半透明のフェード効果を付ける事も出来る。

<参考サイト>
http://miracle-ysdesign.com/blog/javascript/443.html

画像エフェクト jQueryプラグイン

「JsManipulate」
ライセンス料がスタンダードで12ドル

「camanjs」
推奨ブラウザはIE9から

可変グリッドとソートが出来るjQuery「jQuery Responsive Tile Gallery」

可変グリッドとソートが出来るjQuery「jQuery Responsive Tile Gallery」

参照サイト：「jQuery Responsive Tile Gallery」