使用蒙版使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/