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