jQuery：ホバーでの画像のクロスフェード

StackOverflow https://stackoverflow.com/questions/831018

  •  06-07-2019
  •  | 
  •  

質問

2つの画像に影響を与える「フェードイン」スクリプトを実装しようとしています：

<script type="text/javascript">

  $(document).ready(function(){

        $('img').mouseover( function() {

              $(this).fadeOut(200, function() {

                    $(this).attr({'src':'http://example/images/image.png'});

               if (this.complete) $(this).fadeIn(500);

              });
        });

  });

</script>

jQueryのこのビットは、私に以下を提供します：

1-最初に画像がフェードアウトして消えます 2-次に、空白スペースから新しいスペースが出現します。

したがって、実際の「フェードイン」効果を得るためにスクリプトを改善したいと思います。

これまでに検討してきた2つの優れたリソースがあります：

  • サイクルプラグイン-非常にクール（ホバーでそのサイクル効果を取得しようとします）
  • JQuery for Designers クールですが、IEには多くの問題がありました（fadeInの奇妙な黒いピクセル化された境界線）。

最終的な追加の解決策を誰かが指摘してくれてありがとう。

Jan

編集：CSSトリック/ソリューションはこちら http：// paragraphe。 org / stackoverflowdemos / crossfade-images /

役に立ちましたか？

解決 2

最近、CSSに焦点を当てたソリューションを見つけました。もう1つは、Document on jQueryで0にフェードし、マウスオーバーでフルにフェード/マウスアウトで再び0にフェードします。

他のヒント

2番目のフェードを呼び出す方法。元のフェードへのコールバックにより、それらが次々に実行されることが保証されます。

これでさらに運が上がるかもしれない

$('img').mouseover( function() {
          $(this).fadeOut(200);
          $(this).attr({'src':'http://example/images/image.png'});
          if (this.complete) $(this).fadeIn(500);
        });

2番目のイメージがどこかにプリロードされない限り、2番目のイメージのロード時間は気まぐれになります。

これは一種の時間のかかる修正ですが、滑らかなフェードを得るために私がすることです。 Fadeoutを使用し、コールバックとして、$。ajaxを使用して実際に新しい画像をロードし、そのsuccess：関数を使用してdiv（またはimg）に追加し、complete：関数を使用してフェードしますin。これにより、スムーズなfadeout-newcontent-fadeinアクションが実現します。

phpファイルをロードする例を次に示します。原理は画像でも同じです：

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top