0

どんな助けでも大歓迎です...

カラー写真が白黒からフェードアウトする効果を作成しようとしています。フェードインは機能しますが、最初に白黒のものをフェードアウトします。その後、ホバリングすると元のグラフィックに戻りますが、現在はまったく行われていません。

以下のコードは、上記のセクションとは別に完全に機能します...

//Loop through the images and print them to the page
for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            // following line I originally suggested, but let's make it better...
            //$('#bg').append(html).fadeIn('slow');
            // also note the fine difference between append and appendTo.
            var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
            $('img', $d).hover(function() {
                var largePath = $(this).attr("rel");
                $(this).fadeOut("slow", function() {
                    $(this).attr({ src: largePath }).fadeIn("slow");
                });
            });
        }
    });
}
4

2 に答える 2

0

hover(over, out) イベントには 2 つの関数を指定できます。現在、「オーバー」機能のみを使用しています。「アウト」機能は（提供していないため）無視されているため、フェードアウト効果が見られません。

コールバック関数が呼び出される前に、フェードアウト効果がアニメーションの完了を待機するため、探している効果が機能していません。両方の効果を同時に実行する必要があります。

この効果を達成するのは少し難しくなります。

まず、2 つの画像要素が必要です。1 つはカラーを含み、もう 1 つは白黒イメージを含みます。

$(this).fadeOut("slow");
$("otherImageElement").fadeIn("slow");

今。すべてを調査するつもりはありませんが、. これを行うと、アニメーション中に「this」イメージ要素の右側に「otherImageElement」が一時的に表示されます。明らかにあなたが望むものではありません。「otherImageElement」は、元の画像に対して「相対的に」配置する必要があると思います。そのため、一方が他方の上に表示されます。

于 2009-11-04T15:18:21.990 に答える
0

ブラッド、ご意見ありがとうございます...私はあなたがそれにアプローチした方法が好きです...私はそれがうまくいくことを望んでいました:)

それは再び空白の画面を生成しました申し訳ありません...これが私のコードです...

          function switch(element) { 
            var originalPath = $(element).attr("src"); 
            var switchToPath = $(element).attr("rel"); 
            $(element).attr({ src: originalPath }); 
            $(element).fadeOut("slow", function() { 
                    $(element).attr({ src: switchToPath }).fadeIn("slow"); 
            } 
        }

      //Loop through the images and print them to the page
        for (var i=0; i < totalBoxes; i++){
            $.ajax({
                url: "random.php?no=",
                cache: false,
                success: function(html) {
                    // following line I originally suggested, but let's make it better...
                    //$('#bg').append(html).fadeIn('slow');
                    // also note the fine difference between append and appendTo.
                    var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
                    $('img', $d).hover( switch(this), switch(this) );
                }
            });
        }
于 2009-11-04T20:34:32.070 に答える