1

次のことをうまくやる方法がわかりません。

画像をフェードアウトする必要があります。画像のソースを変更します。その後、フェードインします。

しかし、問題は、フェードアウトとフェードインが同時にある必要があることです。もちろん、私が今やっている方法（数行下を読んでください）は、非常に目立つフェードアウト中にソースを変更します。

$('#lightboxImage').fadeOut('slow');
$('#lightboxImage').attr('src', 'an imagesource');
$('#lightboxImage').fadeIn('fast');

これを実行すると。フェードアウトの前に画像を変更します。

フェードアウト コールバック関数に 2 番目の行を入れると。新しい画像がフェードインする前に、白い画面の短い期間があります。

誰かがこれを理解するのを手伝ってくれることを願っています。:)

4

4 に答える 4

5

fadeOutコールバック機能を使用する必要があります。下記参照、

$('#lightboxImage').fadeOut('slow', function () {
   // Callback function that will be called after fadeOut
   $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

以下はjQueryのドキュメントからのものです。

.fadeOut( [duration] [, easing] [, callback] )

  • durationAアニメーションの実行時間を決定する文字列または数値。
  • easingA 遷移に使用するイージング関数を示す文字列。
  • callbackアニメーションが完了したら呼び出す関数。
于 2012-10-25T14:42:59.763 に答える
3

コールバック関数を使用します。

$('#lightboxImage').fadeOut('fast', function() {
    $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

ウィキペディアのページでは、コールバック関数についてよく説明されています。

コンピューター プログラミングでは、コールバックは実行可能コードまたは実行可能コードの一部への参照であり、引数として他のコードに渡されます。これにより、下位のソフトウェア レイヤーは、上位のレイヤーで定義されたサブルーチン (または関数) を呼び出すことができます。

于 2012-10-25T14:43:17.057 に答える
1

人々が与えている答えがあなたの望むものかどうかはわかりません。

最初の画像を2番目の画像に「フェードイン」させたいと思います。

この場合、2 つのイメージを前後に配置する必要があります。

display: none後ろのものはcssにある必要があります。

次に、次のことができます。

$('img#image1').fadeOut();
$('img#image2').fadeIn();

そして、最初の画像が 2 番目の画像にフェードインするはずです。

フェード前に前景の画像が背景の画像を覆うように、2 つの画像を完全に配置する必要があります。

例http://jsfiddle.net/vre4M/

これにより、前後に移動することもできます: http://jsfiddle.net/vre4M/1/

于 2012-10-25T14:47:22.517 に答える
0

それらをキューに入れるとうまくいきます：

$('#lightboxImage').fadeOut('slow', function () {
  $(this).attr('src', 'an imagesource').fadeIn('fast');
  });
});

何度も見つからないように $(this) を使用します。

編集: attr 関数にはコールバックがないため、回答を更新しました。みんなありがとう。

于 2012-10-25T14:45:05.590 に答える