jquery - 如何为这个社交图标获得相同的jquery悬停效果？

Question

如何获得与 the Epione blogger template 中相同的 jQuery 悬停效果(缓动) ？

我尝试了很多方法将其放入我的博客中，但我认为我对 jQuery 动画代码很菜鸟。

如果您能在这方面帮助我，我将非常感激。

HTML 代码

<div id='get_social'>
<div class='get_social_wrap'>
    <a class='follow_fb_link' href='http://www.facebook.com/facebook-id' title='follow us on facebook'/>
    <a class='follow_twitter_link' href='http://twitter.com/twetter-id' title='follow us on twitter'/>
    <a class='follow_rss_link' href='/feeds/posts/default' title='subscribe to our rss feed'/>

 </a></a></a></div>

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://1.bp.blogspot.com/-cKUUmDR1mkw/ThsIt1kAzlI/AAAAAAAABOQ/PFgbBB1e0VQ/s1600/ep_fb.png) no-repeat; float:left; margin-right:7px;}
.follow_twitter_link{width:22px; height:22px; background:url(http://3.bp.blogspot.com/-ne3mIs7NGqk/ThsIuqNTIjI/AAAAAAAABOg/kIbh7Z9A96E/s1600/ep_twitter.png) no-repeat;  margin-right:7px; float:left;}
.follow_rss_link{width:22px; height:22px; background:url(http://4.bp.blogspot.com/-V_MuLwEucB0/ThsIuOcu7OI/AAAAAAAABOY/4jyEVTewJQM/s1600/ep_feed.png) no-repeat; margin-right:7px; float:left;}

jQuery 缓动插件

<script src='http://my-subtitles-blog.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>

Answer 1

他们所做的就是制作如下图片:

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

<小时/>

这是他们网站上的相关代码:

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)
        });
});