如何使用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