jQuery幻灯片图像转换答案

【问题标题】：jQuery Slideshow Image TransitionjQuery幻灯片图像转换
【发布时间】：2013-01-23 09:48:02
【问题描述】：

我的 jQuery 幻灯片有问题，我似乎无法弄清楚。在图像转换期间，幻灯片将闪烁白色，而不是很好地淡入下一张图片。我认为这与以下代码行有关：

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

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

Here's 幻灯片的 jsFiddle。

谢谢！

【问题讨论】：

标签： javascript jquery jquery-animate slideshow

【解决方案1】：

我已重构您的代码并将其发布在此处：

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 vs setTimeout：我使用 setTimeout 而不是 setInterval，它可以更好地控制时间。当用户使用上一个/下一个按钮打断自动转换时，会重新安排自动转换。

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

【讨论】：

谢谢！我很感激时间和精力。我没有接受答案，因为我正在尝试自己编写幻灯片。我应该在问题中提到这一点！ +1 的想法和帮助！

【解决方案2】：

你必须在开始淡出当前图像之前显示下一张图像，同时你必须这样做，只需将.next()图像的fadeIn(1000)替换为show()，就像这样http://jsfiddle.net/nyXUt/6/

【讨论】：

谢谢！这似乎适用于幻灯片本身，但是下一个和上一个按钮呢？我尝试应用您的逻辑，但如果您快速单击下一个和上一个按钮，有时它只会显示一个空白屏幕。
我要做的是，我会添加一个 transition 变量，当动画开始时将设置为 true，当动画停止时设置为 false，这样多次单击不会使相同的动作开始同时，这是一个示例jsfiddle.net/nyXUt/13，它还可以防止在单击的同时启动 switchSlide() 函数，从而造成混乱

【解决方案3】：

可能会最小化 fadeOut() 和 fadeIn() 时间或 fadeOut(slow)

【讨论】：

fadeOut 和 fadeIn 基本上是对不透明度进行动画处理的糖衣版本。在您的 jsFiddle 中，它“闪烁白光”，因为图片的不透明度正在淡出中下降，并且当某些内容不透明 100% 以下时，显然背景会发光。在这种情况下，在 jsFiddle 你的背景是白色的。这些幻灯片中的大多数在它们后面的 div 中都会有深灰色或黑色背景......这就是为什么你不习惯看到你的“白色闪光”

【解决方案4】：

当您单击下一个或上一个时，您应该停止间隔和上一个动画，即：

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

当下一张图像的淡入完成后，您重新开始间隔，即：

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

编辑： 如果您在一秒钟内单击开关按钮 10 次。大约 20 个动画将同时运行。

编辑： 如果您在图像切换（自动或以其他方式）时单击下一个或上一个，并且淡化已经在进行中，则淡化将在整个效果的时间跨度（即 1 秒）内从几乎淡化到完全淡化。在这段时间里，图像大部分是白色的。

在手动切换时设置淡出可能会更好（比如 300 毫秒甚至更少）。这也将改善用户体验。

编辑： 这是fiddle

代码如下：

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

【讨论】：

我已经添加了在您单击下一个/上一个时停止幻灯片放映的代码。我只是没有将其包含在问题中，因为这不是问题。另一方面，转换之间的白色闪光仍然发生。
我现在在自己的屏幕后面，我现在看到明显的白色闪光。我更新了代码和小提琴以防止白闪

【解决方案5】：

您可以尝试使用（仅）适用于 jQuery 动画的延迟功能。

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

但如果您使用此处其他评论者所说的提供的回调，则最好的方法。

【讨论】：

【解决方案6】：

问题是你在淡入的同时淡出。使用标准的缓动函数，中间有一个点，两个图像都几乎不可见，并且在图像所在的位置留下一个空白。

为了解决这个问题，我改变了图像的顺序，以便可见图像位于堆栈顶部。现在我们可以将新图像放在当前可见图像的顶部并淡入。一旦新图像完全可见，我们就隐藏以前的图像。这使得过渡更加顺畅。

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

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

【讨论】：