jquery - jQuery 幻灯片 - 图像转换问题

Question

我正在制作这个幻灯片，但是当图像动画时，我会得到一个白色的闪光，然后是下一个图像。解释起来有点困难，所以我创建了这个http://jsfiddle.net/2SJ8B/ 我想它与我的 css 有关吗？

#slideshow {
    width: 700px;
    height: 400px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

#slideshow img {
    position: absolute;
    height: 500px;
    width: 700px;
}​

你会注意到它不是一个流畅的动画，但有一些事情正在发生。谢谢！

Answer 1

我认为你的问题是在淡入淡出的一半，两张照片的透明度都是 50%，所以你看到了 25% 的白色背景。这可以被视为“闪光”。考虑不要淡出传出的图像，而是在淡入完成后将其隐藏（使用setTimeout()）。

Answer 2

试试这个更新的小提琴......

http://jsfiddle.net/2SJ8B/5/

关键是在fadeIn()淡入淡出完成后运行的命令中的函数...

$('#slideshow img:first').appendTo('#slideshow').fadeIn(1000, function() {
    $(this).siblings().hide();
});

这意味着它会拍摄第一张图像，将其放在最后一张图像之后（在它前面），然后淡入。一旦完成，它就会隐藏所有其他图像。一秒钟后，它重复。现在双重褪色消失了，白色的“闪光”消失了。