同时淡入和淡出背景图像

Fade in and out background images simultaneously

本文关键字：背景 图像 淡出 淡入      更新时间：2023-09-26

问题是我的背景图像大小不同，而且不可预测，所以使用CSS转换会使拉伸动画化，看起来很难看。因此，我真的需要用JS来做这件事。

var images = [
    "http://ns223506.ovh.net/rozne/e800637ee8c7de5cdaed8df8ea3635f1/wallpaper-2585508.jpg",
    "http://ns223506.ovh.net/rozne/15382371cb0d5b9319f5f4469bbc4511/wallpaper-2585497.jpg"
];
var counter = 0;
setInterval(function () {
    $(".bg").css('backgroundImage', 'url("' + images[counter] + '")');
    $('<img>').attr('src', images[++counter]); // preload the next image
    if (counter == images.length) counter = 0;
}, 2000);

http://jsfiddle.net/mVAvF/1/

我想做的是淡入新的背景图像，同时淡出旧的。有什么建议吗？

不能在同一元素中将一个背景渐变为另一个背景。你必须在当前背景的顶部或后面添加另一个元素，然后如果新元素在顶部，则将其淡入；如果新元素在后面，则将旧元素淡入。

我之前回答了一个类似的问题，其中包含一个jsFiddle：jQuery背景图像旋转脚本-希望修改

相关文章：