[英]css background-image changing with animation
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. 并有一个等待时间的
setTimeout
。
However I want a changing animation kinda like : http://www.luckywok.at 但是我想要一个改变的动画类似: 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. 问题是当我使用
fadeout
和fadeIn
它逐渐淡出并在我的完整屏幕中,因为我有一个包装DIV(#Mask)围绕着一切。
Does anyone have an idea what methods were used on that particular site? 有谁知道在该特定网站上使用了哪些方法?
Simple solution. 简单解决方案
Fullscreen : http://jsfiddle.net/9GwNG/3/show/ 全屏: http : //jsfiddle.net/9GwNG/3/show/
jsfiddle : http://jsfiddle.net/9GwNG/3/ 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);
Just use CSS- Transitions and a setInterval function. 只需使用CSS-Transitions和setInterval函数。 http://jsbin.com/ugERaZO/1/edit
http://jsbin.com/ugERaZO/1/edit
Transitions are support for > ie9 see caniuse . 过渡是支持> ie9 见caniuse 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.