javascript - 具有多个背景图像的动画

Question

我正在尝试为我的多个背景图像创建一些动画。

我有这个 CSS 代码:

header {
background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png'), url('/img/cloud4.png');
background-position: left bottom, 20% 40%, 40% bottom, right 85%;
background-repeat: no-repeat;
}

我只想无限循环地移动云朵。这是我的 JavaScript 代码:

  $('header').animate({
    'background-position-x': '10%, 3%, 5%, 7%'
  }, 500, 'linear');

问题是这行不通。只有当我只写一个 background-position-x 值时它才有效。但在那种情况下，所有的云都从相同的 x 值开始。

Answer 1

看来您在 css 中使用了 background-position，在 jquery 中您使用了 background-position-x。为什么不尝试使用 jquery 将 background-position 重置为您想要的值？