2

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の奇妙な黒いピクセル化された境界線）に多くの問題がありました。

誰かが最終的な追加の解決策を指摘することができればどうもありがとう。

1月

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

4

3 に答える 3

3

最近、CSS に焦点を当てたソリューションを見つけました。画像を別の画像の上に絶対に配置し、ドキュメントの準備ができたら jQuery で 0 にフェードし、マウスオーバーで完全にフェードし、マウスアウトで再び 0 にフェードします。

于 2009-12-01T13:13:03.850 に答える
3

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

これで運が上がるかもしれません

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

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

于 2009-05-06T18:53:10.237 に答える
1

これは一種の長い修正ですが、スムーズなフェードを得るために私が行っていることです。Fadeout を使用し、コールバックとして $.ajax を使用して実際に新しい画像をロードし、success: 関数を使用して div (または img) に追加し、complete: 関数を使用してフェードします。これにより、スムーズなフェードアウト-新しいコンテンツ-フェードイン アクションが実現します。

これはphpファイルをロードする例です。原理は画像と同じです:

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});
于 2009-05-06T18:58:08.743 に答える