如何为这个社交图标获得相同的jqueryhover效果？

如何获得与Epione博客模板中相同的jQueryhover效果（缓动）？

我已经尝试了很多方法将它放到我的博客中，但我认为我是jQuery动画代码中的noob。

如果你能帮助我，我将非常感激。

HTML代码

CSS代码

 #get_social{float:left; position:relative; margin:0px;} .get_social_wrap{ position:relative; width:160px; margin-top:15px;} .follow_fb_link{width:22px; height:22px; background:url(http://sofzh.miximages.com/jquery/ep_fb.png) no-repeat; float:left; margin-right:7px;} .follow_twitter_link{width:22px; height:22px; background:url(http://sofzh.miximages.com/jquery/ep_twitter.png) no-repeat; margin-right:7px; float:left;} .follow_rss_link{width:22px; height:22px; background:url(http://sofzh.miximages.com/jquery/ep_feed.png) no-repeat; margin-right:7px; float:left;} 

jQuery Easing插件

Answer 1

他们所做的只是拥有如下图片：

作为背景，然后在hover时为背景位置设置动画。

---

以下是他们网站的相关代码：

 jQuery(function(){ var easing = 'easeOutBounce'; jQuery('.follow_fb_link, .follow_twitter_link, .follow_rss_link').css({backgroundPosition: '0px 0px'}) .mouseover(function(){ jQuery(this).stop().animate({backgroundPosition:'0 -22px'},200, easing) }) .mouseout(function(){ jQuery(this).stop().animate({backgroundPosition:'0 0'},200, easing) }); }); 

Answer 2

他正在做的是动画标签上的背景位置并使用“弹性”（我认为）。 所以它会是这样的：

 $('get_social_wrap a').hover(function(){ $(this).stop().animate({ backgroundPosition : '50% 25px' }, 'easeInOutElastic'); }, function(){ $(this).stop().animate({ backgroundPosition : '50% 0px' }, 'easeInOutElastic'); }); 

在http://api.jquery.com/animate/上了解有关动画语法和缓动的更多信息。

Answer 3

谢谢你们的答案，我发现了问题。 这是我需要添加（jQuery背景位置动画插件），所有工作正常，你可以从这里下载它

http://keith-wood.name/backgroundPos.html

和来自这里的Easing插件

http://gsgd.co.uk/sandbox/jquery/easing/

最终代码将是这样的，享受:)