jQuery css 背景位置动画答案

【问题标题】：jQuery css background-position animationjQuery css 背景位置动画
【发布时间】：2011-05-03 21:48:16
【问题描述】：

我对 jQuery 和 CSS 有一个奇怪的问题；这似乎是一个 jQuery 错误；我试图四处搜索，但信息很难看。
有一张大照片作为身体的背景；当我点击一个按钮时，我希望获得一个简单的背景 jQuery 动画，从“底部”位置到“50%”位置。
好吧，如果我设置 $("body").css("background-position", "center 50%"); 它可以工作，但如果我尝试使用 animate() jQuery 函数，它就不再工作了。
那么有没有可能以某种方式产生这种效果？
非常感谢你。

【问题讨论】：

标签： jquery animation css

【解决方案1】：

我很确定不能将animate() 用于相对值，因为根据相对信息计算绝对位置并不容易。

尝试一直使用像素值。

【讨论】：

@bobighorus 这正是animate() 不这样做的原因:) 这应该可以通过使用.height()/.width() 来实现。
我尝试使用像素值，但背景立即在顶部跳转并在右侧移动 50px ！！！绝对是一个错误！

【解决方案2】：

我建议使用包含图像（或将图像作为背景）的 div 和 .动画那个div。从一个最小的情况开始，你只有 1 个 div，绝对定位，并且 div 内有一个 img。然后在其上添加其他元素（更高的 z-index）并实现所需的外观和行为。

【讨论】：

是的，这是一个想法，但我不喜欢添加无用的标记......而且我不确定背景上的图像是否会在每个分辨率下覆盖页面的全局区域。 ..

【解决方案3】：

我正在尝试重新创建问题，但 Pekka 正在解决问题……使用 jQuery，您可以计算窗口的当前高度，将其减半，并使用该像素值设置背景位置。

【讨论】：