Javascript 使用jQuery在类之间交换时触发淡入淡出_Javascript_Jquery_Html_Css_Fade

Javascript 使用jQuery在类之间交换时触发淡入淡出

javascript jquery html css

Javascript 使用jQuery在类之间交换时触发淡入淡出,javascript,jquery,html,css,fade,Javascript,Jquery,Html,Css,Fade,到目前为止，我有以下代码在工作：相关JS如下所示： // Define classes & background element. var classes = ['bg1','bg2','bg3','bg4'], $bg = document.getElementById('blah'); // On first run: $bg.className = sessionStorage.getItem('currentClass') || classes[0]; // On bu

到目前为止，我有以下代码在工作：

相关JS如下所示：

// Define classes & background element.
var classes = ['bg1','bg2','bg3','bg4'],
    $bg = document.getElementById('blah');
// On first run:
$bg.className = sessionStorage.getItem('currentClass') || classes[0];
// On button click:
$('.swapper').mousedown(function () {
  // (1) Get current class of background element,
  // find its index in "classes" Array.
  var currentClassIndex = classes.indexOf($bg.className);
  // (2) Get new class from list.
  var nextClass = classes[(currentClassIndex + 1)%classes.length];
  // (3) Assign new class to background element.
  $bg.className = nextClass;
  // (4) Save new class in sessionStorage.
  sessionStorage.setItem('currentClass', nextClass);
});

就我而言，这在功能上非常有效--我可以单击一个按钮在这四个类之间不断交换，同时还可以将当前类存储到sessionStorage，这样当我单击网站上的链接时，

currentClass

就会立即加载。（注意：在我的网站上，设置是相同的，但是类

bg1

、

bg2

、

bg3

和

bg4

包含背景图像。）

我希望它做什么： 当从一个类切换到另一个类时，我希望它能进行快速/短交叉淡入。现在它只是从一个类/背景捕捉到另一个类/背景

我的想法是：有没有一种方法可以触发包含淡入的CSS类转换或动画，可能是作为父类？我知道有一个jQuery

fade

函数，但我还没能让它在我的设置中工作，这样它就会在鼠标点击时触发。

这里有一个根据你的评论更新的，你说你已经让它工作了

我添加了超时函数

setTimeout(function(){$bg.className = nextClass}, 500);
setTimeout(function(){$($bg).fadeIn(500)}, 500)

第一个超时使图像在第一个图像淡出后立即交换。第二个超时给了它一点加载时间，这样它就不会那么紧张了

你可以玩

}，500）数字，让它按你想要的时间计时，500
是半秒，1000
是一秒等等。
根据你的评论，这里有一个更新，你说你已经让它工作了
我添加了超时函数
setTimeout(function(){$bg.className = nextClass}, 500);
setTimeout(function(){$($bg).fadeIn(500)}, 500)

第一个超时使图像在第一个图像淡出后立即交换。第二个超时给了它一点加载时间，这样它就不会那么紧张了
你可以玩}，500）数字以获得您想要的时间，500
是半秒，1000
是一秒等等。
？@ArunPJohny感谢您的回复！您的示例的问题是，无论出于何种原因，当类包含背景图像时，它都不起作用。不支持背景图像，仅支持彩色图像is@ArunPJohny，但图像正在交换，就在<代码>淡出
发生之前。我做错了什么？理想情况下，我希望图像从一个淡入另一个。。。现在它淡入白色，然后另一个图像淡入。也许我需要对类/图像进行分层，并重新排序它们的z索引？？？@ArunPJohny感谢您的回复！您的示例的问题是，无论出于何种原因，当类包含背景图像时，它都不起作用。不支持背景图像，仅支持彩色图像is@ArunPJohny，但图像正在交换，就在<代码>淡出

发生之前。我做错了什么？理想情况下，我希望图像从一个淡入另一个。。。现在它淡入白色，然后另一个图像淡入。也许我需要将类/图像分层并重新排序它们的z索引？这太棒了，非常感谢！我已经用你的方法做了。我唯一可能搞砸的另一件事是，如果类不是

bg1

，在页面加载之间（即，如果我单击网站上的链接），会有轻微的闪烁。原因是，

bg1

首先被快速加载（它是在HTML中定义的），但随后会话存储在正确的背景中加载。我通过在CSS中为每个

bg

class a fadein样式提供了部分修正。它修复了大部分问题，但并不完美。也许我必须使用一个不包含背景的虚拟类，然后在Load上交换正确的类。很高兴我能提供帮助，至于你的最新问题，我认为最优雅的解决方案是没有背景的虚拟类，或者灰色背景，在$（document）上可以淡入正确的图像。ready（）实际上你让我想到了。。。起初，我打算使用jQuery将虚拟类替换为另一个加载中的类，但是我用

bgTemp

替换了HTML中的

bg1

，只是将

bgTemp

类设置为纯白色。我认为现在加载时发生的事情是，它将

bgTemp

交换会话中存储的任何内容。这是因为它不再显示

bg1

一瞬间，而是显示一个纯白色背景，而不是

bgTemp

。再次感谢阿米尔！这太棒了，非常感谢！我已经用你的方法做了。我唯一可能搞砸的另一件事是，如果类不是

bg1