change background-image of div with animation

Question

I would like to create a little slider to change background-image of my div every seconds.

My code doesn't work for the moment, image is not changed. And ideally, i would like that the script run in infinite mode..

HTML

<div id="slidesPartenairesHome"></div>

CSS

#slidesPartenairesHome {
    background-size: contain;
    background-position: center center;
    width: 300px;
    height: 170px;
    margin-left: 120px;
}

JS

   $( document ).ready(function() {

        var arrayOfPartenaires = [
            "images/partenaires/a.png",
            "images/partenaires/b.jpg",
            "images/partenaires/c.jpg",
            "images/partenaires/d.png",
            "images/partenaires/e.png",
            "images/partenaires/f.jpg",
            "images/partenaires/g.jpg",
            "images/partenaires/h.jpg",
            "images/partenaires/i.png",
            "images/partenaires/j.jpg",
            "images/partenaires/k.jpg",
            "images/partenaires/l.jpg"
        ];


        for (var i=0; i<arrayOfPartenaires.length; i++) {

            var currentPartenaireImg = arrayOfPartenaires[i];

            $('#slidesPartenairesHome').animate({opacity: 0}, 'slow', function() {
                $(this).css({'background-image': 'url("'+currentPartenaireImg+')'}).animate({opacity: 1});
            });

        }

    });

I think so fadeOut is mostly used for image animation. just saying.. — Viraj Nalawade, Jun 29 '15 at 12:10

score 3 · Answer 1 · edited May 23 '17 at 10:24

You could use window.setinterval, you could also use setTimeout but setinterval is a litle bit more precise.

Example with setinteval:

window.setInterval(function(){
    var url = getCurrent();
    //start animation
    $('#slidesPartenairesHome').delay( 500 ).fadeTo(500, 0.3, function()
    {
        $(this).css('background-image', 'url(' + url + ')');
    }).fadeTo('slow', 1);
}, 1000);

// We start with index of 1 because we want to skip the first image, 
// Else we would be replacing it with the same image.
var index = 1;
     var arrayOfPartenaires = [
            "http://yourdomain.com/images/partenaires/a.png",
            "http://yourdomain.com/images/partenaires/b.png",
            "http://yourdomain.com/images/partenaires/c.png"
        ];

function getCurrent(){
    // We check if the index is higher than the ammount in the array.
    // If thats true set 0 (beginning of array)
    if (index > arrayOfPartenaires.length -1){
        index = 0;
    }
    var returnValue = index;
    index ++;
    return arrayOfPartenaires[returnValue];       
}

Note if you really want to change the image every 1 second the background will be changing very fast.

Fiddle

score 0 · Accepted Answer · answered Jun 29 '15 at 13:00

I hope this may help you

html

<div id="slidesPartenairesHome">
        <div id="imags">
        </div>
    </div>

Css

#slidesPartenairesHome
        {
            margin-left: 120px;
        }
        #slidesPartenairesHome, #imags
        {
            background-size: contain;
            background-position: center center;
            width: 300px;
            height: 170px;
        }

Js

 $(function () {
            var arrayOfPartenaires = [
            "http://fotos2013.cloud.noticias24.com/animales1.jpg",
            "http://www.schnauzi.com/wp-content/uploads/2013/03/animales-en-primavera.jpg",
            "https://johannagrandac.files.wordpress.com/2015/01/conejos.jpg",
             "http://png-4.findicons.com/files/icons/1035/human_o2/128/face_smile.png",
            "http://icons.iconarchive.com/icons/rokey/the-blacy/128/big-smile-icon.png",
            "http://simpleicon.com/wp-content/uploads/smile-256x256.png"
        ];
            var loaders = 0;
            function cycleImages() {
                var element = arrayOfPartenaires[loaders];
                $("#imags").css({ 'background-image': 'url(' + element + ')' }).animate({ opacity: 1 }).hide().fadeIn("slow");
                if (loaders < arrayOfPartenaires.length) {
                    loaders = loaders + 1;
                    if (loaders >= arrayOfPartenaires.length) {                        
                        loaders = 0;
                    } 
                }
                else {
                    loaders = 0;
                }
                console.log(loaders, arrayOfPartenaires[loaders]);
            }
            cycleImages();
            setInterval(function () { cycleImages() }, 3000);
        });

jsFiddel Demo

why i need to copy you answer ? its a basic logic who request @wawanopoulos :) — Prasad Raja, Jun 30 '15 at 07:21

change background-image of div with animation

2 Answers2