1

是否可以使用 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;
    }

查询：

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

现在它工作正常，但悬停时没有漂亮的动画。我想知道如何设置切换背景图像位置的动画效果。

感谢任何对此进行尝试的人。:)

我希望有人可以回答我的问题而无需指向我的教程？我对教程的问题是它们都强迫我改变我的 html，我现在非常锁定。

另外，为什么动画功能在我上面的示例（@CMS）中不起作用？

谢谢大家的帮助！:)

4

3 回答 3

3

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

由于您无法更改 HTML，我建议您使用 JavaScript 通过动态插入将显示 H1 标记的新图像的跨度来更改标记。

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

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

http://jsbin.com/adike/（编辑： http: //jsbin.com/adike/edit/）

于 2009-01-01T20:26:16.000 回答
2

这篇文章将让你开始Two Image Technique

[更新]

为您找到了更好的教程： 本文将向您展示如何创建褪色图像（例如徽标）

于 2008-12-26T23:32:49.230 回答
1

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

于 2010-06-11T08:35:10.913 回答