jQuery在悬停时动画精灵

时间:2013-02-27 14:06:10

标签: jquery jquery-animate

我只是想弄清楚,如果我能得到一些我有油漆标记的东西,目前用作导航列表项目下方的背景图像。

是否可以为div底部重叠的辅助li设置动画,以在背景图像上创建显示效果,使其看起来好像图像从左到右显示,直到线完全显示?当你盘旋时,有点像一个不断增长的图像。

2 个答案:

答案 0 :(得分:1)

您还可以尝试使用SpriteOnHover jquery插件。

它有一些你可以使用的参数,它很轻,所以它可能是值得的。你可以在这里http://apolinariopassos.com.br/dev/sprite-on-hover-jquery-plugin/

用法为$('#yourSprite').spriteOnHover(); 这将使插件工作为默认参数,指向:

$('#yourSprite').spriteOnHover({fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false;repeat:true})

答案 1 :(得分:0)

您可以使用jQuery为background-position-xbackground-position-y属性设置动画。

我没有任何代码向您展示,但这是一个例子。

$('#element-to-animate').animate({
    'background-position-x': '10%',
    'background-position-y': '20%'
}, 1500, 'linear');