javascript - 淡出/int 背景图像只有根 div - jQuery/js

Question

当我想用 fadeOut/In 更改背景图像时遇到问题。问题是它对所有内容(div 和 form child)进行了输出/输入。我需要的是它只影响父 div (.valign-wrapper) 的图像。一些帮助？谢谢!

<div class="valign-wrapper">
    <div class="div2">
        <div class="div3">
            <form>
            </form>
        </div>
    </div>
</div>

$(function () {
    var i = 0;
    var images = ['Background1.jpg', 'Background2.jpg', 'Background3.jpg'];
    var image = $('.valign-wrapper');
    setInterval(function () {
        image.fadeOut(1000, function () {
            image.css('background-image', 'url(/Images/' + images[i] + ')');
            image.fadeIn(1000);
        });
        if (i === (images.length - 1)) {
            i = 0;
        } else {
            i++;
        }
    }, 5000);
})

Answer 1

如果您希望这是一个定时转换，您可以只使用 CSS 动画。

像这样设置一个关键帧:

    .wrap {
        animation: transition 10s linear infinite;
    }

    @keyframes transition {
        0% {
            background-image: url("img1");
        }
        50% {
            background-image url("img2");
        }
        100% {
            background-image: url("img1")
        }
    }