我有一个带有背景图像的 div 元素,我正在尝试使用 Jquery 淡入和淡出背景图像。 到目前为止,该函数运行良好,但它淡出了整个 div,而不仅仅是背景,如我所愿。
function rentPics()
{
$('#d2').css('background-image','url(' + mazdaArr[1] + ')');
interID=setInterval (changeImage,3000);
}
function changeImage()
{
$('#d2').animate({opacity: 0}, 1500, function(){
$('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
}).animate({opacity: 1}, 1500);
x++;
if (x==mazdaArr.length)
{
x=1;
}
}
最佳答案
如果您正在寻找简单且轻量级的交叉淡入淡出,请使用 CSS transition
。这不会影响元素内的text
、border
和box-shadow
。
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
看看这个 fiddle .
Chrome、Safari 和 Opera 支持它,但我不太确定 Firefox 和 IE 是否支持
如果您有更大的图像列表要循环。您可能还需要考虑首先缓存图像 URL,因为我注意到第一次使用时出现一些闪烁/闪烁。在此处检查解决方案 - Preloading CSS Background Images
关于javascript - 背景图像不透明度淡出整个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19940874/