css background-image changing with animation

Question

I tried to change my background image with the following code

$('#mask').css({'background-image' : 'url('changingVar')', 
    'background-repeat' : 'no-repeat',  
    'background-position': 'center',
    'background-size': 'cover',         
}); 

and having a setTimeout for the waiting time.

However I want a changing animation kinda like : http://www.luckywok.at

The problem is when I use fadeout and fadeIn it's fading out and in my complete screen, since I have a wrapper DIV (#Mask) around everything.

Does anyone have an idea what methods were used on that particular site?

Answer 1

Simple solution.

Fullscreen : http://jsfiddle.net/9GwNG/3/show/

jsfiddle : http://jsfiddle.net/9GwNG/3/

// code was written in a hurry
//
var step = 1;

function bg(){
 var opacity = 0.0;
 if (step == 3){
  n = 3;
  step = 1;
  opacity = 1.0;
  $("#item_"+step).animate({'opacity':opacity},2000);     
  $("#item_"+n).animate({'opacity': 0.0},2000);
  return;     
}
  n = step+1;
  $("#item_"+step).animate({'opacity':opacity},2000);
  $("#item_"+n).animate({'opacity':1.0},2000);
  step = n;
}

function loop(){
 setInterval(bg,4000);    
}

setTimeout(loop,500);

Answer 2

Just use CSS- Transitions and a setInterval function. http://jsbin.com/ugERaZO/1/edit

Transitions are support for > ie9 see caniuse .