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

Question

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

相关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);
});

就我的目的而言，这在功能上非常有效——我可以单击一个按钮在这四个 class 之间不断切换，同时还将当前的 class 存储到 sessionStorage，这样当我单击我网站上的链接，currentClass 会立即加载。（注意：在我的网站上，设置是相同的，但是 class 是 bg1、bg2、bg3 和 bg4 包含背景图片。）

我希望它做什么： 从一个 class 切换到另一个时，我希望它执行 quick/short 交叉淡入淡出。现在它只是从一个 class/background 捕捉到另一个

我的想法是：有没有一种方法可以触发 CSS class 包含淡入淡出的过渡或动画，也许作为父级 class？我知道有一个 jQuery fade 函数，但我无法让它与我的设置一起工作，因此它在鼠标单击时触发。

Answer 1

根据您的评论，这是更新后的 jsfiddle。

我添加了超时功能

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

第一个超时使得图像在第一个图像淡出后向右交换。第二次超时给了它一点时间来加载，所以它不那么紧张。

您可以使用 }, 500); 数字来随意计时，500 是半秒，1000 是一秒等。

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

Trigger a fade when swapping between classes using jQuery

javascript

jquery

html

css

fade

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

Trigger a fade when swapping between classes using jQuery

javascript

jquery

html

css

fade

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