使用jQuery从一个CSS类动画到另一个CSS类,特别是background-image属性？

Question

我有两个这样的CSS类:

.active {
    background-image: url(active.png);
    opacity: 1;
}

.inactive {
    background-image: url(inactive.png);
    opacity: .5;
}

我想调用一个从一个背景图像转换到另一个背景图像的函数,并且还可以处理不透明度的变化.理想情况下,这将是一个jQuery调用:

$('.active').animate('.inactive', 500); // 500 is the duration of the animation

是否有任何东西以简单,不臃肿的方式做到这一点？我想象从一个背景图像转换到另一个背景图像将是一个超过500毫秒的简单交叉淡入淡出.这可能只用一个元素吗？

如果没有人知道他们个人认为优雅且会落后的现有解决方案,我会喜欢自己编写代码并让每个人都对其进行审核.如果John Resig自己写了这样的插件(例如,彩色动画),那将是很棒的.;)

我相信这个问题与从一个CSS类到另一个CSS类的动画的其他问题根本不同,因为我发现的其他问题没有解决background-image属性.

Answer 1

我怀疑这是否可能。我假设当前的动画实现只是获取 CSS 样式属性的开始和值，然后循环应用该属性的所有中间值来创建动画效果。

背景图像属性的中间值是多少？

一种可能的解决方案是使用 HTML5 画布编写您自己的动画函数。这不是基于 CSS 的解决方案，因此您的用户将需要最新的浏览器才能看到正在运行的动画。

编辑： 重新阅读您的问题，我意识到您并不是在谈论将一张图像变形为另一张图像。您似乎正在追求的简单的淡入/淡出功能可能仅使用 CSS 就可以实现。