我在使用jQuery幻灯片时遇到了问题,但似乎无法解决。在图片转换过程中,幻灯片会闪烁白色,而不是顺利地淡入下一张图片。我认为这与以下代码有关:
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
点击上一个和下一个按钮会导致同样的问题。
这里是 幻灯片的 jsFiddle。
谢谢!
我在使用jQuery幻灯片时遇到了问题,但似乎无法解决。在图片转换过程中,幻灯片会闪烁白色,而不是顺利地淡入下一张图片。我认为这与以下代码有关:
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
点击上一个和下一个按钮会导致同样的问题。
这里是 幻灯片的 jsFiddle。
谢谢!
在淡出当前图片之前,您需要显示下一张图片,并且同时进行操作。只需将.next()图像的.fadeIn(1000)替换为show()
,就像这样:http://jsfiddle.net/nyXUt/6/
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", "");
});
动画时间:我添加了回调和.stop()
到动画中,以防止动画重叠。
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);
}
$('#slideshow img:first').appendTo('#slideshow');
$('#slideshow img:last').fadeIn(1000, 'swing', function() {
$('#slideshow img:last').prev().hide();
});
你可以尝试使用延迟函数,它仅适用于jQuery动画。
$('#slideshow img:first').fadeOut(1000).next().delay(1000).fadeIn(1000).end().appendTo('#slideshow');
但是最好的方法是使用其他评论者在此处提供的回调函数。
也许可以通过缩短fadeOut()
和fadeIn()
的时间或使用fadeOut(slow)
来实现。
transition
的变量,当动画开始时将其设置为 true,当动画停止时将其设置为 false。这样,多次点击不会使相同的操作同时开始。以下是一个示例:http://jsfiddle.net/nyXUt/13/,它还可以防止在单击时同时启动 switchSlide() 函数,从而使其变得混乱。 - Mircea Sandu