jqueryのfadeIn,fadeOutの表示がうまくできません。

Question

ちぇ・ゲバ男

1

1もっと見る

70pt

ウェブ制作

jqueryのfadeIn,fadeOutの表示がうまくできません。

http://www.jkktmfy.com/pg/test/

サムネイルをマウスオーバーしたときに大きい画像が対応した画像に切り替わるようにしたいのですが微妙に挙動がおかしいです。（上記URL参考）

切り替わる瞬間に前の画像が表示されてしまっているようです。
あらかじめ大きい画像はpreloadしていますがそれも関係ないようです。

おそらく微妙なことだと思いますが教えてください！

$(function(){
　$("#SmallImage img").mouseover(function(){
　　
　　smallimgURL = $(this).attr("src");
　　bigimgURL = smallimgURL.replace("_s","_b");
　　
　　$("#BigImage img").fadeOut(120,
　　　function() {
　　　　$("#BigImage img").attr("src", bigimgURL);
　　　　$("#BigImage img").fadeIn(120);
　　　}
　　);
　});
});

ソース：
http://www.jkktmfy.com/pg/test/test.zip

回答の条件

1人5回まで

登録：2009/10/24 13:51:25
終了：2009/10/25 20:04:09

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.2

Mook13143932009/10/24 17:14:42

35pt

こちらでも何となく現象再現しました。

３の画像だけ一瞬表示が遅れますね。

ソースをざっと見た感じはおかしなところはなさそうですが、大きいサイズの画像サイズが３だけ他のものと比べると大きいようです。

（１、２は66KB、３は2.4MB）

これをリサイズして、他の画像と同程度にしてみてはどうでしょうか。

これで変わらないようでしたらソースに問題がある可能性が高いので、コメント欄を有効にしていただけますか。

以下、そちらで対応したいと思います。

ご回答ありがとうございます。

言い忘れましたが・・・現象を確認していただきたいため、

３の画像サイズだけ、わかりやすく大きくさせていただきました。

2009/10/24 17:29:47

Mook 2009/10/24 17:33:50

あらら、画像サイズは実験の結果だったんですね。
スクリプトの方の確認をしてみます。
Mook 2009/10/25 00:23:06

簡単かと思っていましたが、意外に難しい問題です。

スクリプト自体は今のところ特に問題が見つかっていません。
ブラウザ固有（FireFox）の問題でしょうか。

FadeOut、FadeIn のパラメータを"slow"にすると挙動が比較的
安定しているように見えましたが、それではだめなんですよね・・・。

FadeIn のタイミングをOnLoad に切り替えたり、ImageSwitch を試して
みましたが今のコードの方が動作的にはよさそうです。

明日時間がとれたらもう少し見てみます。
ちぇ・ゲバ男 2009/10/25 09:37:44

Mookさん、ありがとうございます。

はい、確かにSlowにすると比較的安定しているのはこちらでも確認できました。
ただ今回120で行きたいです。。。

画像のロードあたりが臭いのでそのあたり
私も調べているのですが意外と難しいですよね・・
feeds 2009/10/25 18:14:36

遅くなりました。昨日試してうまくいってたのですが投稿できませんでした。

コード的にはjQueryで使う普通のフェードイン・フェードアウトなコードだけど、重い画像だとモタツクのはjQueryの仕様なのかもですね。ただ、調べ切れていませんが・・・バージョンによってはFIXされているかもしれませんし・・・。

以下のコードでどうでしょう。
私の環境ではうまくいきました。
$(function(){
$("#SmallImage img").mouseover(function(){

smallimgURL = $(this).attr("src");
bigimgURL = smallimgURL.replace("_s","_b");

$("#BigImage img").fadeOut(120,
function() {
$("#BigImage img").attr("src", bigimgURL);
$("#BigImage img").load(function(){
$("#BigImage img").fadeIn(120);
});
}
);
});
});
feeds 2009/10/25 18:22:08

あ、すみません、JSコード修正だけではなくHTML側のDIVにも少し工夫が要ります。
<div id="BigImage" style="width:500px;height:332px;"><img src="images/img_1_b.jpg" width="500" height="332" /></div>
として、box状態を最初から作っておいてください。
あくまでさっきのJS使うならです。

以上です。
ちぇ・ゲバ男 2009/10/25 20:03:37

できました！

loadされてからというのをいれるのですね。
ありがとうございました！
Mook 2009/10/25 22:46:24

あぁ、もう解決されたようですね。

チラつきに関してはこちらも画像の表示位置を固定することで回避しましたが、表示速度に関しては
事前に画像を読み込むことで（キャッシュではなくメモリ上に）回避しました。

もう不要だとは思いますが、一応結果報告まで。

index.html 側は
――――――――――――――――――――――――――
<head>
<style type="text/css">
.small {
position : absolute;
top :400px;
left :10px;
}

.big {
position : absolute;
top :10px;
left :10px;
}

</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>

<body>
<div>
<img id="BigImage1" class="big" src="images/img_1_b.jpg" width="500" height="332"/>
<img id="BigImage2" class="big" src="images/img_2_b.jpg" width="0" height="322" />
<img id="BigImage3" class="big" src="images/img_3_b.jpg" width="0" height="322" />
</div>

<div id="SmallImage" class="small">
<a href="javascript:void(0)"><img src="images/img_1_s.jpg" width="181" height="120" border="0" /></a>
<a href="javascript:void(0)"><img src="images/img_2_s.jpg" width="181" height="120" border="0" /></a>
<a href="javascript:void(0)"><img src="images/img_3_s.jpg" width="181" height="120" border="0" /></a>
</div>
</body>
</html>
――――――――――――――――――――――――――

JS 側は
――――――――――――――――――――――――――
var currentImageNum = 1;

$(function(){
$("#SmallImage img").mouseover(function(){
var nextImageNum = $(this).attr("src").match(/\d+/);
var cID = "#BigImage" + currentImageNum;
var nID = "#BigImage" + nextImageNum;

$( cID ).fadeOut(120);
$( cID ).attr("width",0);

$( nID ).attr("width",500);
$( nID ).fadeIn(120);
currentImageNum = nextImageNum;
});
});
――――――――――――――――――――――――――

です。
ちぇ・ゲバ男 2009/10/25 22:59:17

Mookさん、ありがとうございます！

メモリに読み込む！
そんなやり方ができるんですね！
こちらもとても参考になります。

勉強になりました。
ありがとうございました。

Mookノート - Image の切り替え 2009-10-25 23:43:13

Image の切り替え久しぶりにプログラミングの話題を書こう。ことの発端は例の如くはてなの質問からである。 jqueryのfadeIn,fadeOutの表示がうまくできません。下のような構成のときに、小

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

feeds · Accepted Answer · 2009-10-24T16:01:17+09:00

>> 切り替わる瞬間に前の画像が表示されてしまっているようです。

私の環境ではこれは再現できませんでした。FirefoxとIEで見てみましたが・・・

なので、

>> 微妙に挙動がおかしいです。

これの意味するところがわかりませんが、

たとえば、

fadeIn、fadeOut

の引数120を500とかにしてみるとどうでしょう。

動作がゆっくりになりフェードイン/フェードアウトの"感じ"になりませんか？

feeds · Accepted Answer · 2009-10-24T16:01:17+09:00

>> 切り替わる瞬間に前の画像が表示されてしまっているようです。

私の環境ではこれは再現できませんでした。FirefoxとIEで見てみましたが・・・

なので、

>> 微妙に挙動がおかしいです。

これの意味するところがわかりませんが、

たとえば、

fadeIn、fadeOut

の引数120を500とかにしてみるとどうでしょう。

動作がゆっくりになりフェードイン/フェードアウトの"感じ"になりませんか？

jqueryのfadeIn,fadeOutの表示がうまくできません。

ベストアンサー

feeds512009/10/24 16:01:17

その他の回答（1件）

feeds512009/10/24 16:01:17ここでベストアンサー

Mook13143932009/10/24 17:14:42

コメント（8件)

この質問への反応（ブックマークコメント）

トラックバック