Javascript 在div容器中移动重复模式

我有一个

div

容器，它有一个重复的背景图像，形成了一个模式，我想用jQuery为它设置动画，使模式向西南移动

如何做到这一点

$（文档）.ready（函数（）{
$（“#容器”）。设置动画({
“背景位置”：“1110px 1110px”
}，1000，函数（）{
});
});

看一看。这是一个jQuery插件，使背景图像的动画制作变得相当简单

要平移（设置背景图像的动画），文档提供以下代码作为示例：

$('#trees').pan({fps: 30, speed: 2, dir: 'left'});

---

如果您正在寻找一种更简单、更轻的方法，可能是更好的解决方案。要设置背景动画，请为其设置偏移：

$('.elem').animate({backgroundPosition: '500px 150px'}) 

像这样：

    $("#container").animate({
        'background-position': '1110px 1110px'
    }, 1000, function () {
 });

---

这似乎不起作用，这有什么问题吗？：我不确定我做错了什么，它在本地仍然不起作用。我在问题中添加了我的页面。这根本不起作用，因为jQuery本身不支持背景图像动画（很像它不支持彩色动画），因此需要一个我在回答中提到的插件。@Markum LOL我忘了包含此功能所需的附加脚本。这就是为什么它对我有效，但对你无效。有关脚本，请参阅我编辑的文章。将其另存为.JS并包含在页面中。

    $("#container").animate({
        'background-position': '1110px 1110px'
    }, 1000, function () {
 });

/**
* @author Alexander Farkas
* v. 1.22
*/

(function ($) {
    if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8
        var oldCurCSS = $.curCSS;
        $.curCSS = function (elem, name, force) {
            if (name === 'background-position') {
                name = 'backgroundPosition';
            }
            if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if (!force && style && style[name]) {
                return style[name];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }

    var oldAnim = $.fn.animate;
    $.fn.animate = function (prop) {
        if ('background-position' in prop) {
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if ('backgroundPosition' in prop) {
            prop.backgroundPosition = '(' + prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };

    function toArray(strg) {
        strg = strg.replace(/left|top/g, '0px');
        strg = strg.replace(/right|bottom/g, '100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
    }

    $.fx.step.backgroundPosition = function (fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem, 'backgroundPosition');
            if (!start) {//FF2 no inline-style fallback
                start = '0px 0px';
            }

            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.end);
            fx.end = [end[0], end[2]];

            fx.unit = [end[1], end[3]];
            fx.bgPosReady = true;
        }
        //return;
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
    };
})(jQuery);