人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: ちぇ・ゲバ男
●カテゴリ:ウェブ制作
✍キーワード:jQuery SRC URL サムネイル ソース
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● feeds
●35ポイント ベストアンサー

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

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


なので、

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

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


たとえば、

fadeInfadeOut

の引数120500とかにしてみるとどうでしょう。

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

◎質問者からの返答

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

引数は120でいきたいですね。。。

ちなみに500にしても微妙におかしいです。


挙動についてですが。


元画像がフェードアウトしていく

消える

と同時に元画像が一瞬表示される

新画像がフェードイン


のような動きです。


ページ表示すぐ後にこの現象が生じ、

何度かマウスオーバーしているとこの現象が生じなくなる

つまり期待通りの動きになります。


ちなみに3番目の大きい画像を2MBぐらいの大きい画像にしてみました。

おそらくこれで確認できるかと思いますが・・・


当方FF3.5.3で確認。

IE8だと確認できず(つまりOK)


2 ● Mook
●35ポイント

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

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


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

(1、2は66KB、3は2.4MB)

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


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

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

◎質問者からの返答

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


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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ