Question

I want to randomly animate the body’s background-position in an interval.
There are a few predefined background-position values (x, y) stored in an array.

Here’s the script so far:

$(document).ready(function() {
    var xyz = new Array();
    xyz[1] = "backgroundPosition: '0% 0%'";
    xyz[2] = "backgroundPosition: '53% 34%'";
    var item = xyz[Math.floor(Math.random()*xyz.length)];

    var move = setInterval(function(){
        $('body').animate({item}, 2000);
    }, 7000);
});

Can someone tell me where the issue is? Any code optimizations?
Thanks alot!

Answer 1

Item should be redefined every time. And also, Math.floor(Math.random()*xyz.length) can be 0 so I added 1+ to your calculation since you start at key 1 on xyz.

 $(document).ready(function() {
        var xyz = new Array();
        xyz[1] = {backgroundPosition: '0% 0%'};
        xyz[2] = {backgroundPosition: '53% 34%'};     

        var move = setInterval(function(){
            var item = xyz[1+Math.floor(Math.random()*(xyz.length-1))];
            $('body').animate(item, 2000);
        }, 7000);
    });