使用 jQuery 從一個 CSS class 動畫到另一個，特別是背景圖像屬性？

Question

我有兩個像這樣的 CSS 類：

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

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

我想調用一個 function 它將從一個背景圖像過渡到另一個背景圖像，並且還可以處理不透明度的變化。 理想情況下，它將是這樣的 jQuery 調用：

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

有什么東西可以簡單、不臃腫的方式做到這一點嗎？ 我想象從一個背景圖像過渡到另一個背景圖像將是一個簡單的交叉淡入淡出超過 500 毫秒。 這甚至可以用一個元素來實現嗎？

如果沒有人知道他們個人認為很優雅並且會支持的現有解決方案，我很樂意自己編寫代碼並讓每個人都進行同行評審。 如果 John Resig 自己編寫一個這樣的插件（例如，彩色動畫），那就太好了。 ;)

我相信這個問題與其他關於從一個 CSS class 動畫到另一個的問題根本不同，因為我發現的其他問題沒有解決背景圖像屬性。

Answer 1

看看JQueryUI.switchClass我想這就是你要找的東西。 它使 object 從.class1平滑過渡到.class2

Answer 2

我懷疑這是否可能。 我假設 animation 的當前實現僅采用 CSS 樣式屬性的開始和值，然后在循環中應用該屬性的所有中間值來創建 animation 效果。

background-image 屬性的中間值是什么？

一種可能的解決方案是使用 HTML5 ZFCC790C72A86190DE551B549D0DZDC 編寫自己的 animation function。 這不是基於 CSS 的解決方案，因此您的用戶將需要最新的瀏覽器才能看到 animation 的運行情況。

---

編輯：重新閱讀您的問題，我意識到您並不是在談論將一張圖像變形為另一張圖像。 您似乎正在追求的簡單淡入/淡出可能僅使用 CSS 就可以實現。