动画背景图像

Posted

技术标签:

【中文标题】动画背景图像【英文标题】: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/

【讨论】:

以上是关于动画背景图像的主要内容,如果未能解决你的问题,请参考以下文章

设置 UIButton 背景图像停止动画

动画背景图像

jQuery同时动画和淡化背景图像

动画 UIButton 背景图像

Android使用淡入/淡出动画更改背景图像

背景图像加载动画