jQuery幻灯片图片过渡

Question

我在使用jQuery幻灯片时遇到了问题，但似乎无法解决。在图片转换过程中，幻灯片会闪烁白色，而不是顺利地淡入下一张图片。我认为这与以下代码有关：

$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');

点击上一个和下一个按钮会导致同样的问题。

这里是 幻灯片的 jsFiddle。

谢谢！

- SeanWM

Answer 1

在淡出当前图片之前，您需要显示下一张图片，并且同时进行操作。只需将.next（）图像的.fadeIn（1000）替换为show()，就像这样：http：//jsfiddle.net/nyXUt/6/

- Mircea Sandu

---

谢谢！这似乎对幻灯片本身有用，但是下一个和上一个按钮呢？我尝试应用您的逻辑，但如果您快速点击下一个和上一个按钮，有时会显示一个空白屏幕。 - SeanWM

我会添加一个名为 transition 的变量，当动画开始时将其设置为 true，当动画停止时将其设置为 false。这样，多次点击不会使相同的操作同时开始。以下是一个示例：http://jsfiddle.net/nyXUt/13/，它还可以防止在单击时同时启动 switchSlide() 函数，从而使其变得混乱。 - Mircea Sandu

Answer 2

我已重构了你的代码并在这里发布：

http://jsfiddle.net/salman/nyXUt/44/

主要更改如下： 白闪瑕疵解决方案：原来使用了淡出和淡入的方式。当两个动画同时开始时，两张图片在某一点都会变得50%透明，导致滑块看起来发白（或背景色）。我采用了另一种方法。利用z-index，我将“隐藏”图像放在“显示”图像前面，然后淡出“隐藏”图像。

#slideshow .current {
    display: block;
    z-index: 1;
}
#slideshow .animate {
    display: block;
    z-index: 2;
}

nextItem.addClass("current");
prevItem.removeClass("current").addClass("animate").fadeOut(animDuration, function () {
    $(this).removeClass("animate").css("display", "");
});

setInterval和setTimeout：我使用了setTimeout而不是setInterval，因为它可以更好地控制时间。当用户通过prev/next按钮中断自动转换时，会重新安排过渡。

动画时间：我添加了回调和.stop()到动画中，以防止动画重叠。

- Salman A

---

谢谢！我很感激你花费的时间和精力。我没有接受答案，因为我想自己编写幻灯片放映。我应该在问题中提到这一点！对于你的想法和帮助，我给你加1分！ - SeanWM

Answer 3

当你点击下一页或上一页时，应该停止间隔和之前的动画，即：

clearInterval(run);
$('#slideshow img').stop();

当下一张图片的淡入效果完成后，您需要重新启动间隔，即：

$('#slideshow img:last').fadeIn(1000, function() { run=setInterval("switchSlide()", speed);})

编辑： 如果您在一秒钟内连续点击10次开关按钮，大约会有20个动画同时运行。

编辑： 如果您在图像正在切换（自动或其他情况）并且淡入淡出已经在进行的时候点击“下一个”或“上一个”按钮，那么淡化效果将在整个特效时间段内从几乎淡入淡出到完全淡出（因此需要1秒）。在此期间，图像将大部分变为白色。

最好将手动切换的淡出速度加快（如300毫秒或更少），这也将改善用户体验。

编辑： 这里是演示

这里是代码：

var speed = 4000;
run = setTimeout("switchSlide()", speed);
$(document).ready(function() {

    $('#caption').html($('#slideshow img:last').attr('title'));

    $('#previous').click(switchBack);
    $('#next').click(switchSlide);

});

function switchSlide() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.first().css({'opacity':0}).appendTo('#slideshow').animate({'opacity':1}, 1000, function() { 
        run = setTimeout("switchSlide()", speed); } );
    $('#caption').html(jq.last().attr('title'));
}

function switchBack() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.last().animate({'opacity':0},1000, function() { 
        $(this).prependTo('#slideshow').css({'opacity':1}); run = setTimeout("switchSlide()", speed);});
    $('#caption').html(jq.get(1).title);
}

- Rembunator

---

我已经添加了代码，当您单击“下一个/上一个”时停止幻灯片播放。我没有在问题中包含它，因为这不是问题所在。另外，转换之间的白色闪光仍然会发生。 - SeanWM

我现在在自己的屏幕后面，现在我看到了明显的白色闪烁。我更新了代码和小样以防止白色闪烁。 - Rembunator

Answer 4

问题在于你在淡出的同时也在淡入。使用标准缓动函数，存在一个中间点，在这个点上两张图片都几乎看不见，留下了一片白色空间。

为了解决这个问题，我改变了图像的顺序，使可见的图像位于堆栈的顶部。现在我们可以将新图像放在当前可见图像的顶部，并淡入它。一旦新图像完全可见，我们就隐藏先前的图像。这样转换会更加平滑。

$('#slideshow img:first').appendTo('#slideshow');
$('#slideshow img:last').fadeIn(1000, 'swing', function() {
    $('#slideshow img:last').prev().hide();
});

这里有一个 jsfiddle： http://jsfiddle.net/nyXUt/52/

- chawkinsuf

Answer 5

你可以尝试使用延迟函数，它仅适用于jQuery动画。

$('#slideshow img:first').fadeOut(1000).next().delay(1000).fadeIn(1000).end().appendTo('#slideshow');

但是最好的方法是使用其他评论者在此处提供的回调函数。

- wintercounter

Answer 6

也许可以通过缩短fadeOut()和fadeIn()的时间或使用fadeOut(slow)来实现。

- Abhijeet K

---

fadeOut和fadeIn基本上是动画不透明度的糖衣版本。在你的jsFiddle中，“闪白”是因为图片的不透明度在fadeOut中被降低，当某物不完全不透明时，背景显然会透过来。在这种情况下，在jsFiddle上，你的背景是白色的。大多数这样的幻灯片都会在它们后面的div中有一个深灰色或黑色的背景...这就是为什么你不习惯看到你的“白色闪光”的原因。 - rnirnber