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

我如何才能获得与中相同的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>

jQuery插件

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

---

他们所做的一切就是拥有这样的图片：

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

---

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

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

---

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

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

---

在此了解有关动画语法和轻松的更多信息。

感谢各位的回答， 我发现了问题。我需要添加（jQuery背景位置动画插件），所有的工作都很好 你可以从这里下载

还有这里的放松插件

最终的代码如下所示，请欣赏：）

$（函数（）{
var easing=&39；easeOutBounce&39；；
$（'；。follow#fb#u link、。follow#twitter#u link、。follow#rss#u link'；）.css（{背景位置：'；0px 0px'；}）
.mouseover（函数（）{
$（this）.stop（）.animate（{backgroundPosition:'；0-22px'；}，200，放松）
})
.mouseout（函数（）{
$（this）.stop（）.animate（{backgroundPosition:'；0 0'；}，200，放松）
});
});

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

<script src='/jquery.easing.1.3.js' type='text/javascript'/>
<script src='jquery.backgroundpos.js' type='text/javascript'/>
<script type='text/javascript'> 
$(function(){
var easing = &#39;easeOutBounce&#39;;
$(&#39;.follow_fb_link, .follow_twitter_link, .follow_rss_link&#39;).css({backgroundPosition: &#39;0px 0px&#39;})
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:&#39;0 -22px&#39;},200, easing)
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:&#39;0 0&#39;},200, easing)
    });
});
</script>