jQuery background image change on timer

Question

I have a div:

<div class="coverImage" style="background-image:url('3.2.5\\assets\\img\\backgroundCanvas1.jpg');"></div>

and an attached jQuery script to rotate its background every 20 seconds

var coverChange =
{
    init: function()
    {

        var itemInterval = 20000;

        var numberOfItems = 4;

        var currentItem = 1;

        $('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");

        //loop through the items
        var infiniteLoop = setInterval(function(){
            $('.coverImage').attr("style", "background-image:url()");

            if(currentItem == numberOfItems -1){
                currentItem = 1;
            }else{
                currentItem++;
            }
            $('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");

        }, itemInterval);
    }
};

coverChange.init();

When the image changes it happens to white out the bottom half until I scroll slightly. My main ask is help with a fadeIn of the new image. (everything else is secondary)

I have experimented using the jQuery fadeIn property but cannot get it to work in a seamless aesthetically pleasing way.

I am not looking for code elegance only function, as you can tell :-)

P.S Loading the image initially via CSS did not work.

Wasn't aware of that library. Will take a look . many thanks — MANICX100
– MANICX100, Commented Oct 25, 2016 at 9:47

mark_c · Accepted Answer · 2016-10-24 22:37:36Z

1

You should be able to add a simple CSS transition to your coverImage element.

.coverImage {
    transition: background 1s;
}

I've created a working example at https://jsfiddle.net/mark_c/pa44n42k/1/

answered Oct 24, 2016 at 22:37

mark_c

1,2121 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The SuperKat · Accepted Answer · 2016-10-24 22:17:32Z

0

For a fade in out effect, you should simply fade out the div before this step:

$('.coverImage').attr("style", "background-image:url()");

and fade it in after this step:

$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");

For fade in out you can use simple jquery as I suppose you already have but not the right way, so good luck.

This will give you a nice fade in/out effect. :)

answered Oct 24, 2016 at 22:17

The SuperKat

2343 silver badges11 bronze badges

1 Comment

MANICX100 Over a year ago

This solution still had the weird effect where only half the image displayed until I scrolled. Weird, but I've got it working now.

Collectives™ on Stack Overflow

jQuery background image change on timer

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related