[jQuery]ロールオーバーで透過する処理を実装する。

ボタンなどのリンク要素にロールオーバーした時に透過処理をさせるjQueryのスニペットです。

当然のことながらjQuery本体は読み込んだ前提ですが、
今回は簡単にイージングもつけていますので、jquery.easing.jsも読み込んでおいてください。

適用させる側のHTMLは簡単です。

HTML

<p class="thumb"><a href="◯◯"><img src="xxx.jpg" width="yyy" height ="zzz"></a></p>

透過処理のjQueryはこんな感じ。

JS

$('.thumb a').hover(function(){
  $(this).animate({"opacity":".6"}, {'duration': 200,'easing': 'easeOutQuart'});}, function(){
    $(this).animate({"opacity":"1"}, {'duration': 200,'easing': 'easeOutQuart'});
  }
);

これを使えばロールオーバーした際の画像を別途用意しなくてもいいのでとても便利ですね。