仅为背景位置X轴制作动画

Animate only background-position X axis

本文关键字：动画背景位置更新时间：2023-09-26

我想设置背景位置X轴的动画，但将Y轴保留为"底部"。

我已经能够使用制作X轴的动画

$('#imageholder').animate({'background-position' : mousePosX});

但是，这会重置在CSS文件上设置为bottom的Y位置。

我尝试过将mousePosX和bottom组合起来，例如：

$('#heroimageholder').animate({'background-position' : mousePosXPercent + " bottom"});

或：

var bgpos = mousePosXPercent + " bottom";
$('#heroimageholder').animate({'background-position' : bgpos});

没有结果。

有没有一种方法可以使.animate()与多个css值一起工作？

我发现这个特殊的问题可以使用background-position-x来解决，例如：

$('#imageholder').animate({'background-position-x' : mousePosX});