如何使用 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 的变化的主要内容,如果未能解决你的问题,请参考以下文章