如何使用jQuery动画化css中的更改

Question

是否可以使用jquery动画化css中的更改？

如果有人能给我举个例子，我将不胜感激。

本质上，我试图通过使用jQuery操纵css中的背景图像来动画精灵技术。目标是动画的悬停，以便我得到一个很好的淡出，而不是仅仅是由下面的代码产生的突然切换。

我现在在这里：

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)中工作？

谢谢大家的帮助！)

Answer 1

要创建一个淡出效果，您需要绝对定位一个元素在另一个之上，并动画元素的不透明度，以显示下面的图像。

由于无法更改HTML，我建议您使用JavaScript动态插入一个span，从而显示H1标记的新图像。

我已经在jsbin.com上建立了一个使用标记的工作示例(即，只使用H1标记)。我使用了jqueryfordesigners.com教程中的图像(因为它是我的)，这样您就可以了解所需的CSS更改。

具体来说，您需要在H1中设置嵌套的SPAN样式，这样才能在H1中完全定位，从而允许它淡入：

http://jsbin.com/adike/ (编辑：http://jsbin.com/adike/edit/ )

Answer 2

这篇文章会让你开始使用Two Image Technique

更新

为您找到一个更好的教程：这篇文章将向您展示如何创建一个衰落的图像(例如，一个徽标)

Answer 3

您必须使用这插件来动画背景位置:)