[英]JQuery Add Fade Effect
我正在尝试使用JQuery创建背景图像转换器,到目前为止,我已经成功了,但是我不确定如何或在代码中添加.fadeIn()效果:
$(function() {
var body = $('.div-slideshow');
var backgrounds = [
'url(img/homeImg.jpg)',
'url(img/homeImg2.jpg)',
'url(img/homeImg3.jpg)'
];
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
});
.fadeIn()
无法完成此操作,因为您使用的是同一元素,并且仅更改其背景。
将此CSS3过渡添加到您的.div-slideshow
类
.div-slideshow {
transition: background 1s linear;
}
您可以根据需要更改转换时间。
这样,更改url属性时背景将自动转换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.