画像切り替え時にフェード

Question

現在、以下のような仕組みで _off,_on の画像を二つ用意して切り替えています。

	$(function(){
		$('a img').hover(function(){
			$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
		}, function(){
		if (!$(this).hasClass('currentPage')) {
			$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
		}
		});
	});

切り替えた時にパッと切り替わってしまうので、フェードさせて切り替える方法ありますでしょうか。

---

以下、追加記載。（上の画像切り替えとは別ですが、内容が似ているのでここに記載しました。）
通常のaタグをホバーした時に背景色を切り替えるようにしているのですが、
背景色を切り替える動きをフェードでじんわりと切り替えるようにすることはできますか。

Answer 1

1つのimgタグの要素を書き換えるのじゃなくて、2つ用意して
（１）上側を薄くして透明にして徐々に下のを見せる
もしくは
（２）上側を透明から徐々に濃くして上のを見せる

と言った方法が必要になると思います。

jQueryだと専用の関数があるのかもしれませんが、私はあまりjQuery詳しくないのでCSSで書くとこんな感じです。

<div class="img-base-position">
    <img id="on" src="_on.jpg">
    <img id="off" src="_off.jpg">
</div>
<style>
.img-base-position{position:relative;}
.img-base-position>img{position:absolute;top:0;left:0;transition:opacity .5s linear 0s;}
img.transparent{opacity:0;}
</style>
<script>
$('.img-base-position').hover(function(){
    $("#off").addClass("transparent")
}, function(){
    $("#off").removeClass("transparent")
})
</script>

jQuery はマウス重ねた時にクラス付け替えるだけにつかってます。
2つタグがあるので透明にした後に完全に非表示にしたいとかあればまたちょっと工夫いりますけど。

---

下の方は

a{background-color:red;transition:background-color .5s linear 0s;}
a:hover{background-color:blue;}

これでいいんじゃないんでしょうか。

どちらも transition という CSS でアニメーションさせています。
.5s がアニメーションにかかる時間（これだと0.5秒）
linear がアニメーションをタイミング（最初と最後をゆっくりするとか）

適当にイジって好みに合わせてください。