Frank78 Frank78 - 3 months ago 6x
HTML Question

Trigger a fade when swapping between classes using jQuery

I have following code working so far: JSFIDDLE DEMO

The relevant JS is here:

// 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);

For my purposes, this functionally working great -- I can click a single button to continually swap between those four classes while also storing the current class to sessionStorage, so that when I click links on my website, the
is loaded right away. (Note: on my website the setup is the same, but the classes
, and
contain background images.)

What I'd like it to do:
When swapping from one class to another, I'd like it to do a quick/short cross-fade. Right now it just snaps from one class/background to another.

My thinking was: is there a way I can trigger a CSS class transition or animation that contains the fade, perhaps as a parent class? I know there's a jQuery
function, but I haven't been able to get it working with my setup so that it triggers on mouseClick.


Here's an updated jsfiddle based on your comment where you said you've sort of having it work.

I've added the timeout functions

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

The first timeout makes it so that the image is swapped right after the first image fades out. The second timeout gives it a bit of time to load in so it's not so jittery.

You can play with the }, 500); number to get it timed just like you want, 500 is half a second, 1000 is a second etc.