javascriptのスライドショー

Question

このスライドショーはjavascriptで動作するようです。最初の画像では画像が正しくフェードインまたはフェードインされますが、2番目の画像では、前のようなトランジションではなく、すぐに画像にスキップするように見えます。

<script type="text/javascript"> 
    var images = ["image1.png", "image2.png", "image3.jpg"]; 
    var imagecount = 0; 
    window.setInterval(setImage,5000); 
    function setImage(){ 
    $('.bgimage').fadeIn(5000); 
    $('.bgimage').css('background-image','url('+images[imagecount]+')'); 
    $('.bgimage').fadeOut(5000); 
    imagecount++;  
    if(imagecount > 2){ 
     imagecount=0; 
    }  
    }     
</script> 

Answer 1

HTML構造やフィドルを見ることなく、正確にトラブルシューティングするのは難しいです。私はおそらくあなたのfadeInとfadeOutコールをそれぞれ5秒間アニメーション化するように設定されており、同時にアニメーション化されている（非同期的に呼び出されている）ので、この問題が発生していると思われます。代わりにfadeOutの組み込みjQueryコールバックを使用して終了した後にfadeInメソッドを実行するように調整する必要があります。これと同じように：あなたはそれをバックフェードイン、その後、（それは見えませんが）、それを更新した後、画像をフェードアウトすべきと

$('.bgimage').fadeOut(500, function() { 
    $('.bgimage').css('background-image','url('+images[imagecount]+')'); 
    $('.bgimage').fadeIn(500); 
}); 

私はまた、あなたのフェード呼び出しの順序を切り替えたあなたの間隔がなければならない、まだ。 5秒ごとに動作し、あなたが望むように動作します。これで、トランジションにはアニメーション化するのに全部で5秒かかることはありません。