带有淡出的jQuery幻灯片 - 没有淡入答案

【问题标题】：Jquery slideshow with fadeOut - without fadeIn带有淡出的jQuery幻灯片 - 没有淡入
【发布时间】：2023-03-25 19:15:02
【问题描述】：

我的网站上有一个简单的jquery 幻灯片，它使用fadeIn 和fadeOut。淡入/淡出正在创建我的背景闪光，我觉得这很烦人。我尝试用其他转换替换，但没有成功。

我的目标是让图像基本上无缝地相互淡入淡出，而在过渡期间，深色图像不会显示我的背景闪光。

我的 jquery：

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

【问题讨论】：

一个 fiddle 或 codepen 的例子可能会让人们更容易看到问题并帮助你。

标签： jquery slideshow fadein fadeout

【解决方案1】：

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

演示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'));
}

【讨论】：

非常感谢。顺便说一句，喜欢小猫。