从元素外部到内部的动画背景位置

Question

我在将背景图像从元素的 OUTSIDE 设置为 INSIDE 时遇到问题。

只要图像始终在元素的范围内，以下代码就可以在 Chrome 中运行：

<script type="text/javascript">
$(document).ready(function() {

    $('.title').css({backgroundPosition: '100% 100px'}).animate({
          'background-position-x': '100%',
          'background-position-y': '50%'
        }, 1000, 'linear');
});
</script>

<style type="text/css">
.title {
    width: 100%;
    height: 400px;
    background: rgba(0,0,0,0.6) url(https://www.google.co.uk/images/srpr/logo3w.png) no-repeat;
}
</style>

<div class="title"></div>​

...但是，如果图像在元素边界之外开始，它会跳跃并且无法按预期工作。

HERE IS A JSFIDDLE

上面的代码在 FF 中根本不起作用，所以我想我的代码肯定有一些我没有发现的基本错误。

任何帮助将不胜感激。

Answer 1

您的问题是 Firefox 故意忽略 background-position-x 和 background-position-y - 您必须在代码中使用 background-position，但您不能在这样的分组属性上使用 animate()。我能想到的唯一解决方案是使用两个相互堆叠的 DIV 元素。