KATALog

画像のマウスオーバーをきもちよ〜くする方法。

サンプルはBOOMBOOM-BASHのGllary

フワッとした感じがたまらない★

必要なものは、jQueryとちょっとしたJavascriptだけ。

まず、jQueryは、Google AJAX Libraries APIを使うと便利。

AJAX Libraries API についてはこちら

今回使うjQueryのURLは「http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js」

これをhead内に書く。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>

ちょっとしたJavascriptはこれ

$(document).ready(function() {
  $(".gallery a img")
  .hover(
    function() {
      $(this).fadeTo(200, 0.5);
    },
    function() {
      $(this).fadeTo(500, 1.0);
    }
  );
});

↑の表記だと改行、余白がうまくとれないので、サンプルを用意しました。

.hover(
function() {
    $(this).fadeTo(200, 0.5);

これは、オンマウス時200ミリ秒の速度で、透明度50%になるという意味

function() {
     $(this).fadeTo(500, 1.0);

これは、マウスアウト時500ミリ秒の速度で、透明度100%になるという意味
ちなみに、0にすると、透明になる。

– 制作メモ