原文：USING JQUERY FOR BACKGROUND IMAGE ANIMATIONS
在阅读了Dave Shea's的文章 CSS Sprites using jQuery来建立动态效果,我发现我喜欢摆弄一些仅仅使用很少的html结构和代码（不需要添加额外的标记）来达到所需的目的。
改变图像背景的位置是一个我发现的建立动感效果很好的的方法。(我并不是第一个这样认为的: 看文章底部的例子).
jQuery是个非常伟大的library让你能够立即使用完成这样的工作,这不能让背景适当的动起来因为他需要两个值而不是一个(更糟糕的是并不是所有的浏览器都想ie一样执行非标准的背景坐标). 直到最近的版本 (1.0.2 写作的时候) Background-Position plugin. 先前的版本不能恰当的支持负数或者是小数属性.
HTML
没有人喜欢添加额外的HTML来增加代码的臃肿，所以，我们看一个非常简单的无序列表：
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS
对于这个,我仅仅是对导航栏做了浮动并且对链接做了block和padding处理 .没有装饰 (下边是整个代码).
ul { list-style:none; margin:0; padding:0;}
li { float:left; width:100px; margin:0; padding:0; text-align:center;}
li a { display:block; padding:5px 10px; height:100%; color:#FFF; text-decoration:none; border-right:1px solid #FFF;}
li a { background:url(bg.jpg) repeat 0 0;}
li a:hover {background-position:50px 0;}
注意 hover 状态已经声明. 用户访问并不需要js支持,至少, 能看到最后的装提案.我已经在 li a 上单独声明了背景以便独立,但是初始化背景的位置需要设置以便你想做特效。
Image
你可以利用不同的图片做出不同的特效.
图像1：重击
在图像1中,开始和结束的状态在左边和右边，但是很简单的倾斜可以做出非常美妙的效果。
图像2：渐变
图像2是非常精细的. 大量的可视化空白在普通和划过状态下在图像的头部和底部。大量大渐变当划过的时间在中间制造出淡入淡出的效果。渐变越大，就感觉淡入淡出效果越接近真实的效果.
图片色泽的单一程度会使图片变得很小,同时. 但是复杂的动作常常需要更多的色深和大一点的文件作为支持。通常表现和应用要做到一个平衡。
查看 demo page 来看这结果是怎么工作的 (每个有2个例子).
Script
最后，这脚本来实现这个效果但是很简单的Finally,当鼠标划入划出的时候会出现这些效果。
$('#nav a').css( {backgroundPosition: "0 0"} )
.mouseover(function(){$(this).stop().animate({backgroundPosition:"(0 -250px)"},{duration:500})})
.mouseout(function(){$(this).stop().animate({backgroundPosition:"(0 0)"},{duration:500})})
元素经过 $ function被抓取并且给了一个默认的css。 这是在ie和ff2中是必须的, 如果不声明默认值. 在IE中, 你可以使用background-position-x 和 -y来规避错误，但是更简单的方法是在脚本的初始值中初始化这些属性。
然后元素就在鼠标经过和划出时候执行特效。
关键问题在于动态效果在试图开始的时候已经结束。这避免了鼠标重复的进出元素的时候特效延迟显示的问题。
jQuery同样有个hover方法代替单独使用mouseover和mouseout方法. 这方法我不赞同是因为我喜欢在使用的时候清楚的声明他们。 hover 方法有两个参数：需要在鼠标划过时候运行的函数和鼠标离开时候运行的函数。
Demo
the demo page,我建立了4个不同的效果，你可以查看源文件来看他们是怎样运行的。