移动背景 - 跨浏览器答案

【问题标题】：Moving Background - Cross Browser移动背景 - 跨浏览器
【发布时间】：2014-09-28 15:38:23
【问题描述】：

我有一个在背景中有图像的 div，它缓慢地向左移动。当它到达图像的末尾时，它开始向右移动。它一遍又一遍地重复这个动画。

它似乎在 Chrome 和 Safari 中完美运行，但我无法让它在 Firefox 中运行。

这是可能导致问题的 jQuery 代码的 sn-p，但我不能 100% 确定：

infiniteAnimate( $('header.nb-slider') ,{
    on:{
        'background-position-x': -slideAnimate,
        'background-position-y': 0
    },off:{
        'background-position-x': $('header.nb-slider').css('background-position-x'), //use style
        'background-position-y': $('header.nb-slider').css('background-position-y') //use style
    }
});

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： jquery firefox animation cross-browser

【解决方案1】：

您的代码没问题。它的 Firefox 不理解 background-position-x 和 background-position-y。您必须将两个值以空格分隔的组合形式提供给 FF：

background-position: x-value + ' ' + y-value,

不幸的是，jQuery 不能为组合值设置动画，您必须编写自己的函数或使用插件。我试过Keith Wood's jQuery Background Position，它似乎在所有浏览器中都可以使用。

【讨论】：