jquery - 使用蒙版使 jQuery 动画垂直背景 Sprite 位置?

标签 jquery css jquery-animate sprite css-sprites

我如何制作一个 jQuery 背景垂直动画来掩盖过渡以使 Sprite 的外观淡入下一个位置?我当前的代码(请参阅下面的 jsfiddle 链接以获取演示)将 sprite 设置为动画到正确的背景位置,但是当它这样做时,您可以看到 sprite 从上到下移动,然后回到顶部。

我希望过渡平滑/淡化,这样当您悬停它时,它会在过渡中淡化。目前,它只是平移。不确定您是否可以制作某种面具或其他东西?我想用 Sprite 来做这个,我已经知道可以用 2 个单独的图像来做。

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

这是我希望它的行为方式(但添加了 jQuery 动画):http://jsfiddle.net/bluetidepro/jNDgT/1/

如果这没有意义,我可以尝试更好地解释。

最佳答案

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

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

关于jquery - 使用蒙版使 jQuery 动画垂直背景 Sprite 位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10842429/

相关文章:

javascript - 一个css3/html5元素增长导致的空白如何填充?

javascript - 隐藏表行时使用 rowspan 处理单元格

javascript - 光滑的轮播个人覆盖

Javascript 在执行下一行之前不等待函数完成

css - 样式 ng2-bootstrap 的 typeahead list-items

events - 使用 jquery animate 在加载时突出显示 div

javascript - 使用 jQuery 根据 div 的多个属性动态创建复选框

html - div 中的图像在图像下方有额外的空间

javascript - 自定义/样式提示窗口?

javascript - jquery animate后显示不可见的div