Question

我的jQuery幻灯片显示有问题，我似乎无法弄明白。在图像过渡期间，幻灯片显示将闪烁白色而不是很好地淡入下一张图片。我认为它与以下几行代码有关：

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

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

Here's幻灯片中的jsFiddle。

谢谢！

Answer 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()以防止重叠动画。

Answer 2

你必须在开始淡出当前图像之前显示下一张图像，同时你必须同时执行此操作，只需将。fadeIn(1000) .next（）图像替换为{{1} }，像这样http://jsfiddle.net/nyXUt/6/

Answer 3

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

Answer 4

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

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

当完成下一张图像的淡入时，请重新启动间隔，即：

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

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

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

最好将手动切换的淡出设置更快（例如300ms甚至更短）。这也将改善用户体验。

编辑： 这是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);
}

Answer 5

问题是你在渐渐消失的同时淡出。使用标准的缓动功能，中间有一个点，两个图像几乎看不见，图像所在的位置留有空白区域。

为了解决这个问题，我已经切换了图像的顺序，以便可见图像位于堆栈顶部。现在我们可以将新图像放在当前可见图像的顶部并将其淡入。一旦新图像完全可见，我们就会隐藏上一张图像。这样可以实现更平稳的过渡。

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

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

Answer 6

您可以尝试使用延迟功能，该功能仅适用于jQuery动画。

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

但是如果您使用其他评论者提供的回调，最好的方法是这里。

jQuery幻灯片图像转换

6 个答案: