Question

首先我在css中有4个布局，我想添加一个幻灯片过渡，第一个到第二个幻灯片过渡是好的但是第二个到第三个幻灯片过渡是不行的，因为如果我在jquery中添加fadeIn或fadeOut效果第三个布局1秒钟重叠整个html体，并持续1秒我在屏幕上有2个布局，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;
}

为可见度附加图片：Link

可见性的网站链接：Website

Answer 1

您需要在fadeOut操作完成后调用fadeIn操作。我无法测试代码，但这应该可行。

变化：

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');
});

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

1 个答案: