カーソルを合わせるとふわっと画像が入れ替わるようにしたい

Question

カーソルを合わせるとふわっと画像が入れ替わるようにしたいのですが
なかなかうまくいきません。
SVGの画像をJPEGの画像に重ねているのですが、JPEGの画像だけカーソルが重なった時にふわっと変わるようにしたいのですが
方法はありますでしょうか。

###ソースコード

<div class="on-off">
                        <img src="images/アイコン.svg" class="absolute" alt=""/>
                        <img src="images/画像１_off.jpg" alt="" class="img-responsive" />
 </div>

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

###補足情報(言語/FW/ツール等のバージョンなど)
Jquery1.11.3使用

Answer 1

やりたいことの認識が間違っていなければjs使わんでもこれでいけますよ。

<style>
.on-off{
  position: relative;
}
.on-off .second{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all .3s;
}
.on-off:hover .second{
  opacity: 1;
}
</style>

<div class="on-off">
  <img src="images/アイコン.svg" class="first">
  <img src="images/画像１_off.jpg" alt="" class="second">
</div>

Comments

[退会済みユーザー]

できました！ありがとうございます。

Jquery勉強中だったのでなんとかJqueryでやってみたかったのですが挫折してます・・・
Jqueryの修正ももしわかればありがたいのですが

[k_teluki]

jqueryでふわっと切り替えるならfadeIn, fadeOutを使うのがよろしいと思います。
hover時に画像ファイル名を変更していますがこれだと画像がパッと切り替わってしまい、ふわっとした表現はできないと思います。
お送りしたサンプルのように2枚の画像を重ねて表示しておき、重なりが上にきている画像をdisplay: noneして、hoverした時にこの画像にfadeIn, fadeOutをかけるといいと思います。