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

Question

I have a problem when I want to change the background image with a fadeOut / In. The problem is that it makes an Out / In of all content (div and form child). What I need is that it only affects the image of the parent div (.valign-wrapper). Some help? Thank you!

<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);
})

You can't fade a parent element, without also fading the children. One option would be CSS transitions on the background image instead. — adeneo, Aug 25 '17 at 18:20
is this a set timed transition? if so you can use all CSS. Check out this pen: https://codepen.io/TheAndersMan/pen/dXMOWR — TheAndersMan, Aug 25 '17 at 18:23
Please refer to this SO link:https://stackoverflow.com/questions/9483364/css3-background-image-transition. Looks like you CSS transitions cannot do that with background-image property. You might need to overlay using z-index and tags. — trk, Aug 25 '17 at 18:34

TheAndersMan · Accepted Answer · 2017-08-25T18:52:00.193

0

If you want this to be a timed transition, you can just use CSS animations.

Just set a keyframe like so:

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

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

edited Aug 25 '17 at 18:52

answered Aug 25 '17 at 18:29

TheAndersMan

376
3
14

I like this solution. What I observed is that when it reaches the last image, it returns to the first but without effect, instantly. – Kardia Aug 25 '17 at 18:44
sorry, the third at 100% is supposed to be img1 as well, i just typed the wrong one. it should be fixed now – TheAndersMan Aug 25 '17 at 18:51
@Kardia yep, no problem. – TheAndersMan Aug 25 '17 at 18:58
definitely a cleaner solution than the one I posted below. Learned something ! :) Thanks @TheAndersMan. But, suppose I had more images then what happens ? – trk Aug 25 '17 at 19:24
@82Tuskers, yeah you can, you just have to adjust the keyframes accordingly. – TheAndersMan Aug 26 '17 at 17:36

score 0 · Answer 2 · answered Aug 25 '17 at 19:22

This might be the solution you are looking for. You might have to change the image references to the one you have in your Images folder. In my case the folder is called images with a smaller '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>

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

2 Answers2