Javascript 幻灯片css布局干扰html正文

首先，我在css中有4个布局，我想添加一个幻灯片过渡，第一个到第二个幻灯片过渡是可以的，但是第二个到第三个幻灯片过渡是不可以的，因为如果我在jquery中添加fadeIn或fadeOut效果，第三个布局会重叠整个html主体1秒，一秒钟后，我在屏幕上有两个布局，他在正常位置看起来很好。如果我不添加任何效果（fadeIn或fadeOut），则过渡是正常的，并且不会在主体中显示重叠布局！ 有什么想法吗？ 以下是我的jQuery代码：

$('.next').click(function(){
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
if(nextSlide.length === 0){
nextSlide= $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
}

以下是我的CSS代码：

.slide{
display:none;
}
.active-slide{
display:block;
}
.layout7{
float: left;
width: 970px;
height: 340px;
}
.layout7-2{
float: left;
width: 970px;
height: 340px;
}
.layout7-3{
float: left;
width: 970px;
height: 340px;
}
.layout7-4{
float: left;
width: 970px;
height: 340px;
}

为便于查看，附上图片：

---

有关可见性的网站链接：

在淡出操作完成后，您需要调用淡出操作。我无法测试代码，但这应该可以工作

更改：

currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');

为此：

currentSlide.fadeOut(600, function(){
    $('.active-slide').removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
});

---

图片没有帮助，因为它不可能重现问题…好的，我从网站上附加了链接