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

Posted 2023-03-06

【中文标题】使用 jQuery 从一个 CSS 类动画到另一个，特别是 background-image 属性？

【英文标题】：Using jQuery to animate from one CSS class to another, specifically the background-image attribute?

【发布时间】：2011-09-11 16:05:37

【问题描述】：

我有两个这样的 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 自己写了一个这样的插件（例如，color animations），那就太好了。 ;)

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

【问题讨论】：

Jquery Animate Background Image Transition的可能重复

Animate addClass/removeClass?的可能重复

【参考方案1】：

看看JQueryUI.switchClass 我想这就是你要找的东西。它使对象从.class1 平滑过渡到.class2

【参考方案2】：

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

background-image 属性的中间值是什么？

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

---

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