如何为此社交图标获得相同的jquery悬停效果? [英] how to get the same jquery hover effect for this social icons?

问题描述

如何获得与 Epione Blogger模板一样的jQuery悬停效果(减轻) ?

我已经尝试了很多方法将其放入我的博客，但是我认为我对jQuery动画代码不感兴趣.

I've tried so many ways to put it into my blog but I think I'm noob in jQuery Animation codes.

如果您能帮助我，我将不胜感激.

I will be very grateful if you can help me in this.

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简易插件

jQuery Easing Plugin

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

推荐答案

感谢你们的回答， 我发现了问题.那是我需要添加(jQuery Background Position Animation Plugin)，并且一切正常 您可以从这里下载

thank you guys for your answers, i found the problem. it was that i need to add the (jQuery Background Position Animation Plugin) and all works fine you can download it from here

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

和此处的简易插件

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

<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>

这篇关于如何为此社交图标获得相同的jquery悬停效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！