幻燈片轉換在javascript

Question

我似乎無法得到這個幻燈片放映與JavaScript一起工作。圖像在第一張圖像上淡入淡出，但在轉換爲第二張圖像時，它似乎立即跳到圖像，而不是像以前那樣轉換。

<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秒，並且同時進行動畫製作（它們被異步調用）。相反，您應該調整fadeIn方法，以在fadeOut使用內置jQuery回調完成後執行。像這樣：

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

我也切換順序的褪色的電話，你應該淡出圖像，然後更新它（雖然它不可見），然後漸回在你的間隔應該還是。以您想要的方式工作，每5秒運行一次。現在，過渡不會花費5秒鐘完成動畫。