动画背景图像

Posted 2023-05-08

【中文标题】动画背景图像

【英文标题】：Animating Background Image

【发布时间】：2010-10-23 07:54:09

【问题描述】：

我喜欢使用 Jquery 及其配套的 Jquery Ui，但无法找到在特定时间段（如 5 秒）内为背景图像设置动画的方法。 我不能这样做：

$('sampleelement').animate('background-image':'url(hello.jpg)',5000);

有什么想法吗？？

【问题讨论】：

您到底想达到什么目的？我以为你试图让背景图像出现？

【参考方案1】：

这是不可能的。 Css 不允许像这样对背景图像进行操作。您应该在内容后面放入一个带有背景的 div，然后将其淡入：

<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div> 
<div id='content'>YDADA</div>

$('#background_img').fadeIn(5000);

【参考方案2】：

使用 jQuery Background-Position Animations 插件。请参阅demo。

【参考方案3】：

为什么不使用动画 GIF？

【讨论】：

没有制作gif的经验

【参考方案4】：

Pim Jager 的方法是最接近没有动画 gif 的方法。

【参考方案5】：

您可以创建多个图像，然后使用 setTimeout 将一个替换为另一个。这有点像模拟 .gif，只是提供了更多的灵活性和质量。

【参考方案6】：

我在Cheer Us Up 上所做的是使用基本的javascript 来改变背景图片——

$(function()
curr = 0;
setTimout(changeBg(),200); 

);

function changeBg() 
curr++;

document.body.style.backgroundPosition = curr + 20;

这是基本思想。我没有使用 jquery，因为我只是想让它慢慢滑过。

【参考方案7】：

这就是你需要的：http://www.ovalpixels.com/bgImageTransition/