如何使用jQuery在CSS中動畫變化

如果有人會如此熱情爲我提供一個例子，我會非常感激。

本質上，我試圖通過在css中使用jQuery操縱背景圖像來動畫sprite技術。我們的目標是對懸停進行動畫處理，以便我可以很好地淡入淡出，而不僅僅是下面代碼產生的突然切換。

這是我在哪裏：

HTML：

<h1 id="solomon">Solomon</h1>

CSS：

body#default h1 { 
text-indent: -9999px; 
display: inline-block; 
height: 213px; 
} 
body#default h1#solomon { 
    background: transparent url(/images/S.gif) center top no-repeat; 
    width: 183px; 
    margin: 100px 0 0 216px; 
    }

JQUERY：

$(function() { 
$('h1').hover(function() { 
    $(this).stop().css('background-position', 'center bottom'); 
}, function() { 
    $(this).stop().css('background-position', 'center top'); 
}); 
});

眼下它工作正常，但是沒有漂亮的動畫版本。我想知道如何動畫切換背景圖片放置的效果。

感謝任何人在這個拍攝。 :)

我希望有人可以回答我的問題，而不指向我的教程？我在教程中遇到的問題是，他們都強迫我改變我在此時被鎖定的HTML。

另外，爲什麼動畫函數不能在我上面的例子（@CMS）中工作？

感謝您的幫助！ :)

來源

2008-12-26 jon