hover表示した画像をフェード切り替え表示したい

Question

実現したいこと

jQueryでhover表示した画像をフェード切り替えしたい。

前提

ホームページのメガメニューを製作しており、メニューのテキストをhover時にイメージ画像を表示・切り替えしたいと思いコードを書いたのですが、知識が浅くどこを間違えているのか分からず、ご教授いただけますと幸いです。

■html

<ul> <li class="change_btn01"><a href="">menu01</a></li> <li class="change_btn02"><a href="">menu02</a></li> <li class="change_btn03"><a href="">menu03</a></li> </ul> <img src="img/img01.png" class="chenge_image">

■jQuery
<script>
$(function() {
$(".change_btn01").hover(function() {
$(".chenge_image").attr("src","img/img01.png");
});
$(".change_btn02").hover(function() {
$(".chenge_image").attr("src","img/img02.png");
});
$(".change_btn03").hover(function() {
$(".chenge_image").attr("src","img/img03.png");
});
});
</script>

■css

<style> .change_image{ transition:all 0.5s ease; } </style>

Comments

[int32_t]

現状のコードでどういう問題があるのでしょうか。

[junichi45]

コメントありがとうございます。質問の情報が足りず申し訳ありません。menu01、menu02と順にテキスト上にカーソルを置いた場合、img01、img02と画像が変わる際、フェードイン・フェードアウトで画像切り替えをさせたいのですが、うまく書けずに躓いておりました。

[int32_t]

ええと、まだ現状の問題の説明ができていませんが、「フェードイン・フェードアウトで画像切り替えをさせたいが、現状では瞬時に切り替わってしまう」でいいですか?
「フェードイン・フェードアウト」というのは、「前の画像がフェードアウトしたあとに次の画像がフェードイン」ですか? それとも「前の画像がフェードアウトしながら次の画像がフェードイン」ですか?

[junichi45]

おっしゃる通り「フェードイン・フェードアウトで画像切り替えをさせたいが、現状では瞬時に切り替わってしまう」という状況でした。正確な説明ができておらず申し訳ありません。。
実現したい事としては「前の画像がフェードアウトしながら次の画像がフェードイン」が希望の動作となります。

Answer 1

「前の画像がフェードアウトしながら次の画像がフェードイン」が希望の動作

現在のHTMLの構造では無理です。クロスフェードということは、前の画像と次の画像を同時に同位置に表示する必要があります。

• <img> は3つ連続させて、それぞれ img01.png img02.png img03.png をセットしておき、最初の2つには position: absolute を付け、最初の1つ以外は opacity: 0 を付けておく。
• hover 時には、対応する <img> のクラスを操作して、opacity: 1 に変更する。それ以外の <img> のクラスを操作して opacity: 0 に変更する。

Comments

[junichi45]

ご回答ありがとうございます。重ねることでクロスフェードを実現するのですね。２点目のhover時のimg操作がまだまだ知識足らずでしたのでもう少し勉強してみます！

[junichi45]

追記

もっと良い書き方があるのだと思いますが、
画像を重ねて設置し、hover時にその他の画像を非表示とすることでできました！
貴重なアドバイスをいただきありがとうございます！

<a href="" class="megalink">親メニュー</a>
<div class="megamenu">
<ul>
<li class="change_btn01"><a href="">メニュー１</a></li>
<li class="change_btn02"><a href="">メニュー２</a></li>
<li class="change_btn03"><a href="">メニュー３</a></li>
</ul>
</div>
<div class="megamenu_img">
<img src="<?php bloginfo('template_directory');?>/img/img01.png" class="chenge_image1">
<img src="<?php bloginfo('template_directory');?>/img/img02.png" class="chenge_image2">
<img src="<?php bloginfo('template_directory');?>/img/img03.png" class="chenge_image3">
</div>

<style>
.megamenu_img > img{
opacity: 0;
}
.chenge_image_visible{
transition:all 0.5s ease;
opacity: 1!important;
}
</style>

<script>
$(function () {
$(".megalink").hover(
function () {
// メガメニューの親ボタンをhoverした時にメニュー１の画像表示
$(".chenge_image1").addClass("chenge_image_visible");
$(".chenge_image2").removeClass("chenge_image_visible");
$(".chenge_image3").removeClass("chenge_image_visible");
},
function () {
$(".chenge_image1").removeClass("chenge_image_visible");
}
);
$(".change_btn01").hover(
function () {
$(".chenge_image1").addClass("chenge_image_visible");
$(".chenge_image2").removeClass("chenge_image_visible");
$(".chenge_image3").removeClass("chenge_image_visible");
}
);
$(".change_btn02").hover(
function () {
$(".chenge_image2").addClass("chenge_image_visible");
$(".chenge_image1").removeClass("chenge_image_visible");
$(".chenge_image3").removeClass("chenge_image_visible");
}
);
$(".change_btn03").hover(
function () {
$(".chenge_image3").addClass("chenge_image_visible");
$(".chenge_image1").removeClass("chenge_image_visible");
$(".chenge_image2").removeClass("chenge_image_visible");
}
);
});
</script>