使用蒙版使jQuery动画化垂直背景精灵的位置？

Question

我如何制作一个jQuery背景垂直动画来掩盖过渡效果，以使精灵的外观淡入下一个位置？ 我当前的代码（请参见下面的jsfiddle链接以获取演示）将精灵动画设置为正确的背景位置，但是当这样做时，您可以看到精灵从上到下移动，然后又回到顶部。

我希望过渡平滑/褪色，以便当您将其悬停时，它会在过渡中逐渐消失。 目前，它只是平移。 不确定是否可以制作某种口罩或其他东西？ 我想用精灵来做到这一点，我已经知道可以用2个单独的图像来做。

这是当前状态的演示： http : //jsfiddle.net/bluetidepro/jNDgT/

这是我想要的行为方式（ 但添加了jQuery动画 ） ： http : //jsfiddle.net/bluetidepro/jNDgT/1/

如果那没有道理，我可以尝试更好地解释。

Answer 1

这应该可以解决问题：
http://jsfiddle.net/bluetidepro/jNDgT/2/

这是一篇解释它的文章：
http://css-tricks.com/fade-image-within-sprite/