如何使用 jQuery 动画化 css 的变化

Posted

技术标签:

【中文标题】如何使用 jQuery 动画化 css 的变化【英文标题】:How to animate a change in css using jQuery 【发布时间】:2010-09-28 12:15:03 【问题描述】:

是否可以使用 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) 中的 animate 函数不起作用?

感谢大家的帮助! :)

【问题讨论】:

【参考方案1】:

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

由于您无法更改 HTML,我建议您使用 javascript 更改标记,方法是动态插入一个可以显示 H1 标记的新图像的跨度。

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

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

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

【讨论】:

【参考方案2】:

This article 将帮助您开始使用Two Image Technique

[更新]

为您找到了更好的教程: This article 将向您展示如何创建褪色图像(例如徽标)

【讨论】:

【参考方案3】:

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

【讨论】:

以上是关于如何使用 jQuery 动画化 css 的变化的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本?

如何停止CSS3的动画

添加内容后如何平滑div高度变化

jQuery:如何在没有已知高度的情况下动画高度变化?

React:如何动画化渲染组件的变化?

如何在 css 和 jquery 中使用形状制作动画?