javascript - 使用预定义数组的随机值在间隔中为“背景位置”设置动画

Question

我想在间隔中随机设置身体的背景位置动画。有一些预定义的背景位置值 (x, y) 存储在一个数组中。

这是到目前为止的脚本：

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

有人可以告诉我问题出在哪里吗？有什么代码优化？非常感谢！

Answer 1

您不是每次都设置项目。修改后的代码。在您的代码项中仅设置一次。在 setInterval 内移动该行将每次更改项目集。

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

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

Answer 2

每次都应该重新定义项目。而且，Math.floor(Math.random()*xyz.length)可以是 0，所以我在您的计算中添加了 1+，因为您从 xyz 上的键 1 开始。

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