jquery - 如何使用 jQuery 对 css 的变化进行动画处理

Question

是否可以使用 jquery 对 css 的更改进行动画处理？

如果有人愿意为我提供一个例子，我将非常感激。

本质上，我试图通过使用 jQuery 操作 css 中的背景图像来为 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)中不起作用？

感谢大家的帮助! :)

Answer 1

要创建淡入淡出效果，您需要将一个元素绝对放置在另一个元素之上，并以动画方式降低元素的不透明度以显示下面的图像。

由于您无法更改 HTML，因此我建议您使用 JavaScript 更改标记，方法是动态插入一个跨度，该跨度将显示 H1 标记的新图像。

我在 jsbin.com 上整理了一个使用您的标记(即仅 H1 标记)的工作示例。我使用了 jqueryfordesigners.com 教程中的图像(因为它是我的)，以便您可以了解所需的 CSS 更改。

具体来说，您需要在 H1 中设置嵌套 SPAN 的样式，使其绝对定位在 H1 内，以使其淡入:

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