Question

我尝试实现幻灯片演示。它工作得非常好，但是当它逐渐消失时，图像重叠。

你能告诉我为什么吗？

$(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

JQuery - 幻灯片重叠

2 个答案: