Question

Right now, I’m using switchClass to change the body backgound. The change is instant and not easy on the eyes.

$('.Click').click(function () {
    var thisClass = $(this).attr('class');
    var st = thisClass.split(' ');
    var firstClass = st[0];

    if (firstClass == "item1") {
        $('.mask').animate({
            marginLeft: "-100%"
        }, 600, function () {
            $("body").switchClass($("body").attr("className"), "bg1");
        });
    } else if (firstClass == "item2") {
        $('.jobsMask').animate({
            marginLeft: "-200%"
        }, 600, function () {
            $("body").switchClass($("body").attr("className"), "bg2");
        });
    }
});

How do I animate this / make this less abrupt?

Answer 1

For background-color fading:

You can use a transition on the body element to animate changes to the background property like this:

body { 
  -ms-transition: background 0.8s ease 0s;
  -moz-transition: background 0.8s ease 0s;
  -o-transition: background 0.8s ease 0s;
  -webkit-transition: background 0.8s ease 0s;
  transition: background 0.8s ease 0s;  
}

test it: http://jsbin.com/odabit/2/edit

---

For fading background images:

Transitions don’t seem to work on background-image (EDIT: they work in Chrome, but not in Fx16, Opera12.1, or IE9), so my workaround is to put your bg images on separate divs, and then fade those in and out, like this: http://jsbin.com/odabit/7/edit

The switching code looks like this:

var cls1 = 'bg1', cls2 = 'bg2',
  body = $('body'),
  bg1 = body.hasClass(cls1) ||  !!body.children('.'+cls1)[0],
  bg = bg1 ? body.children('.'+cls1) : body.children('.'+cls2),
  newBg;

if (!bg[0]) {
bg = $('<div>', {'class': (bg1 ? cls1 : cls2)}).prependTo(body);
}

newBg =  $('<div>', {'class': (bg1 ? cls2 : cls1)}).insertAfter(bg).hide();

body.removeClass(cls1 +' ' +cls2);

bg.fadeOut('slow', function() { bg.remove(); });
newBg.fadeIn('slow');

And the CSS to support it:

body > div[class^="bg"] {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}

.bg1 {
  background: url(/* image 1 */);
}

.bg2 {
 background: url(/* image 2 */); 
}