jQuery img src animation with fade

Question

フェードイン/アウトアニメーションを使用してimg要素のイメージソースを4.6秒ごとに変更するアニメーションを作成しようとしています。ここで

は私のコードです：

var cng = false; 
 
function change(){ 
 
    var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg', 
 
       'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg']; 
 
    $('img').fadeOut("slow", function(){ 
 
    $(this).attr('src', cng ? imgs[0] : imgs[1]); 
 
    $(this).fadeIn("slow", change()); 
 
    cng = !cng; 
 
    }); 
 
} 
 
$(document).ready(function(){setInterval('change()', 4600);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<img src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

これは期待された結果ではありません（表示され、他の4秒を待つように赤色画像を待ち、実行するスニペットをクリック）しあなたが見ることができるようにしかし、私はそれを修正する方法を知らない...

私を助けることができますか？

Answer 1

次のように問題を解決する必要があります。機能が拡張され、不定配列の画像がサポートされるようになりました。 私はまた、2つの外部変数、つまり配列と0インデックス配列に基づくアニメーションの開始点を持つ独自の関数ですべてをラップしました。

$().ready({ 
 
var currentImageIndex = 0 
 
var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg', 
 
       'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg'] 
 
function changeImage() { 
 
if (currentImageIndex > (imgs.length-1)){ 
 
currentImageIndex = 0 
 
} 
 
$('#imgAnimation').fadeOut(1000,function(){ 
 
$('#imgAnimation').attr('src',imgs[currentImageIndex]).fadeIn(1000); 
 
currentImageIndex++ 
 
}) 
 
setTimeout(changeImage, 4600); 
 
} 
 
changeImage(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<img id="imgAnimation" src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

コードを打破するには、まず私たちは、機能changeImageを定義し、その最初の仕事は、私たちは、配列の長さにカウンターを比較するように、私たちのカウンターは、私たちの配列の最後に合格していません確認することです長さとして1を引いたものが最大インデックスではなくカウントを返します。カウンタが最大インデックスを超えた場合、カウンタを0にリセットして配列内の最初のインデックスになります。 次に、アニメーションのステップを開始して、ターゲットにヒットするようにします。イメージのID参照が含まれています。 最初にフェードアウトし、completion関数呼び出しを使用して、画像のsrc属性を配列の次の値に設定し、次にフェードイン関数を呼び出します。 今度はカウンタに1を加え、指定された遅延の後に再び関数を呼び出すように求めるtimeout関数を呼び出します。

これを拡張する必要がある場合は、複数の配列と複数のターゲットを持ち、関数を少し変更することでそれぞれのアニメーションを個別に実行することができます。これをカバーして投稿します私のソリューションに追加のコード。

あなたは、あなたがHTMLマークアップのためのsrc属性を削除することができ、ちょうど保証するために、高さと幅とスタイル属性を追加開始フェードを防ぐために、希望する場合は、次のフィドル https://jsfiddle.net/p1k71nns/ をチェックし、ここで実行するように見えるdoesntのコードとして

スペースはアニメーション用に予約されています。

Answer 2

fadeInが完了したら変更するには、単にコールバックを削除するだけです。あなたがたsetIntervalを使っているので、変更機能は、すでにすべての4.6秒と呼ばれる

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

：AFTER

$(this).fadeIn("slow", change()); 

：BEFORE

。