JQuery - 幻燈片重疊

Question

我嘗試實施幻燈片。它工作得很好，但是當圖像重疊時淡出。

你能告訴我爲什麼嗎？

JSFiddle

$(function(){ 
$('.img0 img:gt(0)').hide(); 
setInterval(function(){ 
    $('.img0 :first-child').fadeOut() 
    .next('img').fadeIn() 
    .end().appendTo('.img0');}, 
    3000); 
}); 

Answer 1

你需要等待淡出到結束。您可以使用fadeOut的回調功能。見下面的代碼：

$(document).ready(function() { 

    $(function() { 
     $('.img0 img:gt(0)').hide(); 
     setInterval(function() { 
       $('.img0 :first-child').fadeOut("slow", function (e) { 
         $('.img0 :first-child').next('img').fadeIn().end().appendTo('.img0'); 
        } 
       ) 
      }, 
      3000 
     ); 
    }); 
}) 
; 

Answer 2

我有沒有跟你的jsfiddle快速發揮，因爲你在圖像上指定的寬度和高度反正你可以做絕對定位，使他們坐在彼此頂部圖像。

.img0{margin-bottom: 40px; text-align:center; float:center; margin-bottom:20px; position: relative; width: 320px; height: 240px; } .img0 img { width: 80%; height: auto; position: absolute; top: 0; left: 0; } 

在這裏看到：

JSFiddle