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

ベストアンサー

id:feeds No.1

feeds回答回数5ベストアンサー獲得回数12009/10/24 16:01:17

ポイント35pt

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

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


なので、

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

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


たとえば、

fadeInfadeOut

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

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

id:revolutionary

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

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

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


挙動についてですが。


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

 ↓

消える

 ↓

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

 ↓

新画像がフェードイン


のような動きです。


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

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

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


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

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


当方FF3.5.3で確認。

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

2009/10/24 17:30:09

その他の回答(1件)

id:feeds No.1

feeds回答回数5ベストアンサー獲得回数12009/10/24 16:01:17ここでベストアンサー

ポイント35pt

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

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


なので、

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

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


たとえば、

fadeInfadeOut

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

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

id:revolutionary

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

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

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


挙動についてですが。


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

 ↓

消える

 ↓

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

 ↓

新画像がフェードイン


のような動きです。


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

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

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


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

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


当方FF3.5.3で確認。

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

2009/10/24 17:30:09
id:Mook No.2

Mook回答回数1312ベストアンサー獲得回数3912009/10/24 17:14:42

ポイント35pt

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

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


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

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

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


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

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

id:revolutionary

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


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

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

2009/10/24 17:29:47
  • id:Mook
    あらら、画像サイズは実験の結果だったんですね。
    スクリプトの方の確認をしてみます。
  • id:Mook
    簡単かと思っていましたが、意外に難しい問題です。

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

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

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

    明日時間がとれたらもう少し見てみます。

  • id:revolutionary
    Mookさん、ありがとうございます。

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

    画像のロードあたりが臭いのでそのあたり
    私も調べているのですが意外と難しいですよね・・
  • id:feeds
    遅くなりました。昨日試してうまくいってたのですが投稿できませんでした。


    コード的には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);
    });
    }
    );
    });
    });
  • id:feeds
    あ、すみません、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使うならです。

    以上です。
  • id:revolutionary
    できました!

    loadされてからというのをいれるのですね。
    ありがとうございました!
  • id:Mook
    あぁ、もう解決されたようですね。

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

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

    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;
    });
    });
    ――――――――――――――――――――――――――

    です。
  • id:revolutionary
    Mookさん、ありがとうございます!

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

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

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

トラックバック

  • Image の切り替え 久しぶりにプログラミングの話題を書こう。 ことの発端は例の如くはてなの質問からである。 jqueryのfadeIn,fadeOutの表示がうまくできません。 下のような構成のときに、小
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません