文章/答案/技术大牛

发布

社区首页 >问答首页 >Fadeout/int background-image only root div - jQuery/js

问Fadeout/int background-image only root div - jQuery/js
EN

Stack Overflow用户

提问于 2017-08-26 02:18:56

回答 2查看 150关注 0票数 2

当我想用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);
})

jquery

html

css

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-26 02:29:23

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

只需像这样设置一个关键帧：

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

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

票数 0

Stack Overflow用户

发布于 2017-08-26 03:22:16

这可能就是您正在寻找的解决方案。您可能需要将图像引用更改为Images文件夹中的图像引用。在我的例子中，文件夹被称为图像，带有一个较小的'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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45887377

复制

相似问题

问Fadeout/int background-image only root div - jQuery/js
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fadeout/int background-image only root div - jQuery/jsEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fadeout/int background-image only root div - jQuery/js
EN