Fadeout/int background-image only root div - jQuery/js答案

【问题标题】：Fadeout/int background-image only root div - jQuery/jsFadeout/int background-image only root div - jQuery/js
【发布时间】：2018-02-03 20:33:51
【问题描述】：

当我想用淡出/淡入更改背景图像时遇到问题。问题是它对所有内容（div 和 form child）进行了 Out / In。我需要的是它只影响父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);
})

【问题讨论】：

你不能淡化父元素，同时也淡化子元素。一种选择是在背景图像上使用 CSS 过渡。
这是一个固定的定时过渡吗？如果是这样，您可以使用所有 CSS。看看这支笔：codepen.io/TheAndersMan/pen/dXMOWR
请参考这个 SO 链接：stackoverflow.com/questions/9483364/…。看起来你的 CSS 转换不能用 background-image 属性做到这一点。您可能需要使用 z-index 和标签进行覆盖。

标签： javascript jquery html css

【解决方案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")
        }
    }

【讨论】：

我喜欢这个解决方案。我观察到的是，当它到达最后一张图像时，它会立即返回到第一张但没有效果。
抱歉，100% 的第三个也应该是 img1，我只是打错了。现在应该修复了
@Kardia 是的，没问题。
绝对是比我在下面发布的更清洁的解决方案。学到东西了！ :) 谢谢@TheAndersMan。但是，假设我有更多图像，那么会发生什么？
@82Tuskers，是的，你可以，你只需要相应地调整关键帧。

【解决方案2】：

这可能是您正在寻找的解决方案。您可能必须将图像引用更改为您在“图像”文件夹中的引用。在我的情况下，该文件夹被称为具有较小“i”的图像。

<!doctype html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <style>
    #pushed-back {
        position: absolute;
        z-index: -1;
        height: 100px;
        width: 100px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        opacity: 1;
        background-image: url('/images/pup-2.png'); /*last image*/
    }
    </style>
</head>

<body>
    <div id="pushed-back" class="valign-wrapper">
    </div>
    <div class="valign-wrapper">
        <div class="div2">
            <div class="div3">
                <form>
                </form>
            </div>
        </div>
    </div>
    <script>
    $(function() {
        var i = 0;
        var images = ['pup-0.png', 'pup-1.png', 'pup-2.png']; /*remember to name your images starting with 0*/
        var image = $('#pushed-back');
        var repeat = function() {
            image.fadeOut(2000, function() {                
                image.css('background-image', 'url(/images/' + images[i] + ')');
                image.fadeIn(2000, repeat);
                i = (i+1) % (images.length);
            });            
        };
        repeat(); 
    })
    </script>
</body>

</html>

【讨论】：