0

現在の画像をフェードアウトし、画像のsrcを変更してから、画像をフェードバックするという非常に単純な画像変更を行っています。これが基本的なコードです...

    $("#picViewer").fadeOut("slow");
    document.getElementById("picViewer").src = "myImage.jpg";
    $("#picViewer").fadeIn("slow");

それ以外の ...

  1. フェードアウト画像
  2. Srcを変更する
  3. 新しい画像でフェードイン

Javascriptはフェードアウトが終了するのを待ちません、そしてこれはあなたが見るものです...

  1. 画像のsrcを変更する
  2. フェードアウト
  3. フェードイン

私は何かが足りないのですか？また、ここにボーナスがあります...JQuery白以外の別の色にフェードすることができますか、それとも状況を回避するために典型的なハッカーを使用する必要がありますか？

4

4 に答える 4

4

.fadeOut完了すると、コールバックを受け入れます。フェードアウトした後は、やりたいことを何でも配置できます。

コールバック関数はthis、フェードアウトする要素としても提供します。要素のを複数の場所でハードコーディングすることを回避するために、要素のを再度this使用する代わりに、を使用して再利用できます。idid

また、jQuery関数呼び出しを連鎖させることもできます。attr()変更したオブジェクト（）を返すので、同じ要素をフェードインするように$(this)チェーンできます。.fadeIn()

$("#picViewer").fadeOut("slow", function() {
   $(this).attr('src','myImage.jpg').fadeIn("slow");
});

事実上、より少ないコード。

于 2012-11-29T05:25:28.600 に答える
3

のオプションの2番目のパラメーターはfadeOut、要素がフェードアウトし終わった後に呼び出されるコールバック関数です。

$("#picViewer").fadeOut("slow", function() {
   document.getElementById("picViewer").src = "myImage.jpg";
   $("#picViewer").fadeIn("slow");
});
于 2012-11-29T05:22:01.937 に答える
0

試す：

$("#picViewer").fadeOut("slow", function(){
    document.getElementById("picViewer").src = "myImage.jpg";
    $("#picViewer").fadeIn("slow");
});
于 2012-11-29T05:22:15.987 に答える
0

アニメーションは非同期で発生するため、アニメーションメソッドのコールバックを使用します。

$("#picViewer").fadeOut('slow', function () {
   //change image src
   //fadeIn
   ...

フェードカラーがCSSカラーを意味する場合、CSS3トランジションを使用していない限り、jQuery UI（または他のプラグイン）を使用して色の変更をアニメーション化する必要があります。

于 2012-11-29T05:22:46.500 に答える