CSS背景图像随动画变化



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

$('#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)。

有谁知道该特定站点使用了什么方法?

简单的解决方案。

全屏 : 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);

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

过渡支持> ie9 请参阅caniuse。

相关内容

  • 没有找到相关文章

最新更新