こんにちは。
今回は前回紹介しきれなかったjQueryプラグインについて続きを書きたいと思います。
相変わらずご紹介程度なので気になったものは検索してみてください！

smart-crossfade.js

マウスオーバーした際にすぐに切り替えるのではなく、ふわっとフェードイン・アウトしながら切り替えてくれるjsです。
ぱっと切り替わるのもいいのですが、フェードで切り替わるものサイトに雰囲気がでますよね。
個人的に知っている中で一番簡単だったのでご紹介させていただきます。

マウスオーバー時にフェードイン・アウト

 

• smart-crossfade配布サイト
• 配布サイト内デモページ

1. まずはhead内でまずはjqueryと一緒に『smart-crossfade.js 』を読み込ませます。


2. 用意する画像は『画像名_off.png』と『画像名_on.png』の2つです。
   拡張子は画像ファイルの拡張子だったら何でも大丈夫です。


3. 『画像名_off.png』を『aタグ』で囲ってあげます。
   <a href=”#”><img src=”images/画像名_off.png” alt=”画像” /></a>

これだけで『画像名_off.png』の画像から『画像名_on.png』の画像にふわっと切り替えが出来ます！

また、88行目に数字がありますのでそこを変えると切り替えの速度が変わるとのこと。
数値が低いほど速く切り替えです。

jquery.backgroundSize.js

CSS3でできた『background-size』プロパティ、すごく便利ですよね。
このプロパティのおかげで最近多い背景に敷いた画像が縦横比を保ちながら可変してくれたり・・！うまく言えないんですけれど便利なんです。
ただこのプロパティIE8以下だと当然のごとく使えないです・・。
なので、『jquery.backgroundSize.js』に頼ってしまいます。

IE8以下でも『background-size』を使えるようにする

• jquery.backgroundSize.js配布サイト

左枠の下にからダウンロードできます。
配布サイト自体がデモページになっていますので、右側のチェックで色々試してみてください。

1. まずはjqueryを読み込ませてください。


2. そのすぐ下で以下のように記述します。
   

   <!–[if lte IE 8]>
   <script type=”text/javascript” src=”common/js/jquery.backgroundSize.js“></script>
   $(function() {
   <script type=”text/javascript”>
   $(“.coverにしたいclass名“).css({backgroundSize: “cover“});
   $(“.containにしたいclass名“).css({backgroundSize: “contain“});
   </script>
   <![endif]–>

ざっくりとですがこれでIEに『background-size』が適用されています。
他で適用させる必要もありませんので、条件付きコメントの記述（<!–[if lte IE 8]>～<![endif]–>）はつけるようにしましょう。

jquery.biggerlink

HTML5ではブロックレベル要素にリンクができますがまあ色々な要因でまだまだHTML5で書けないことも多いですよね・・。
そんなときに使用するのが『jquery.biggerlink』です。
これで、例えばdiv全体にリンクというのも可能になります！

ブロックレベル要素にリンク

• jquery.biggerlink配布サイト

1. jqueryと一緒に『jquery.biggerlink』を読み込ませましょう。


2. そのすぐ下に
   

   <script type=”text/javascript”>
   $(function(){
   $(‘#id名‘).biggerlink();
   });
   </script>

   と記述



3. HTML部分には
   

   <div id=”id名“>
   <div><a href=”#”>テキスト</a></div>
   </div>

   と記述

これでdiv全体にリンクができています！
あとはcssで調整してみてください。

---

自分用のまとめがてらでしたがいかがでしたでしょうか。
また気になるものがあれば随時まとめていきたいなと思っております。