Question

我尝试使用以下代码更改背景图片

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

并且等待时间为setTimeout。

但是我希望改变动画类似：http://www.luckywok.at

问题在于，当我使用fadeout和fadeIn时，它会在我的整个屏幕中淡出，因为我有一个包装DIV（#Mask）围绕着所有内容。

有谁知道在该特定网站上使用了哪些方法？

Answer 1

简单的解决方案。

全屏：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

只需使用CSS-Transitions和setInterval函数。 http://jsbin.com/ugERaZO/1/edit

转换支持＆gt; ie9 see caniuse。

css背景图像随动画而变化

2 个答案: