Question

我的网站上有一个简单的jquery幻灯片，它使用了fadeIn和fadeOut。 fadeIn / Out正在创造我的背景闪光，我觉得很烦人。我试过用其他过渡代替但没有运气。

我的目标是让图像基本上无缝地相互淡化，在过渡期间没有暗图像显示我的背景。

我的jquery：

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein');}, 
  3000);
});

Answer 1

前一段时间我遇到过类似的问题。如果没有提供小提琴，很难给出一个您需要的确切代码的示例。基本上这个概念是，你需要在淡出当前图像时开始显示下一个图像

DEMO http://jsfiddle.net/nyXUt/161/

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

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

    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function () {
        $('#slideshow img:first').fadeOut(1000);
        $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
        $('#caption').html($('#slideshow img:first').attr('title'));
    });

    $('#next').click(function () {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
        $('#caption').html($('#slideshow img:first').attr('title'));
    });

});

function switchSlide() {
    $('#slideshow img:first').fadeOut(1000).next().show().end().appendTo('#slideshow');
    $('#caption').html($('#slideshow img:first').attr('title'));
}

带有fadeOut的Jquery幻灯片 - 没有淡入淡出

1 个答案: