0

ホバー時に画像をフェードアウトさせ、画像 src を交換してからフェードインしようとしています。フェードイン/アウト関数が要素を display:none に設定するため、不透明度をアニメーション化しています。起こる。

これが私のコードです：

$('.imgswap').on({
'mouseenter': function(){
    var $nextimg = $(this).data('imagesource');
        if ($nextimg != $('#floorplan').attr('src')) {
        $('#floorplan').animate({"opacity": "0"}, "fast",function () {
            $('#floorplan').attr('src',$nextimg).animate({"opacity": "1"}, "fast");
        });
    }
}
});

ソースを設定した後、2 番目のアニメーション関数が起動しない理由がわかりますか?

更新: さらにテストし、以下のコメントのいずれかを試した後、SRC が設定された後にアニメーション IS が起動することが判明しましたが、新しい画像がまだ読み込まれていない場合、古い画像は新しい画像が表示されるまで表示されたままになります。利用可能です。animate({"opacity": "1"}, "fast")だから...新しい画像がロードされたときにのみ起動する、ある種の「ローダー」が必要だと思います。

4

1 に答える 1

1

上記のJSで使用したのはDOM次のとおりで、うまく機能します。

<div class="imgswap" data-imagesource="http://placehold.it/350x450">
  <img id="floorplan" src="http://placehold.it/350x150"/>
</div>

コードペン: http://codepen.io/anon/pen/CGKaF

ローディングの問題に対処するために、コードペンがロードされているかどうかを確認するようにコードペンを更新しました。それを試してみてください。また、画像読み込み時の jQuery コールバック (画像がキャッシュされている場合でも)と、この便利なプラグインを確認してください: https://github.com/desandro/imagesloaded

于 2013-09-03T17:26:52.810 に答える