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，这样当我点击我网站上的链接时，{{1} }马上加载。（注意：在我的网站上，设置相同，但类currentClass，bg1，bg2和bg3包含背景图片。）

我喜欢做什么： 当从一个班级交换到另一个班级时，我希望它可以做一个快速/短暂的交叉淡入淡出。现在它只是从一个类/背景到另一个类。

我的想法是：有没有办法可以触发包含淡入淡出的CSS类转换或动画，也许作为父类？我知道这里有一个jQuery bg4函数，但是我还没有能够使用我的设置使它在mouseClick上触发。

Answer 1

根据您的评论，您可以根据自己的评论更新jsfiddle。

我已经添加了超时功能

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

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

您可以使用}, 500);号码来定时，就像您想要的那样，500是半秒，1000是秒等。

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

1 个答案: