[英]css background-image changing with animation
我尝试使用以下代码更改背景图像
$('#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 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.