javascript - 使用 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);
});

就我的目的而言，这在功能上非常有效——我可以单击一个按钮来不断地在这四个类之间进行交换，同时还将当前类存储到 sessionStorage 中，这样当我单击网站上的链接时，currentClass 立即加载。 (注意:在我的网站上，设置是相同的，但是类 bg1、bg2、bg3 和bg4 包含背景图像。)

我想要它做什么: 当从一个类切换到另一个类时，我希望它能够进行快速/短的交叉淡入淡出。现在它只是从一个类别/背景切换到另一个类别/背景。

我的想法是:有没有办法可以触发包含淡入淡出的 CSS 类转换或动画，也许作为父类？我知道有一个 jQuery fade 函数，但我无法让它与我的设置一起工作，以便它在 mouseClick 上触发。

Answer 1

这是更新的 jsfiddle根据您的评论，您说您已经成功了。

我添加了超时功能

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

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

您可以使用 }, 500); 数字来按照您想要的方式计时，500 是半秒，1000 > 是第二个等等。