问题
How can I get the same jQuery hover effect (easing) like that in the Epione blogger template?
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 Code
<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 Code
#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 Easing Plugin
<script src='http://my-subtitles-blog.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
回答1:
All they're doing is having a picture such as these:
as the background, and then animate the background position on hover.
Here's the relevant piece of code from their site:
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)
});
});
回答2:
What he is doing is animating the background position on the a tag and using 'elastic' (I think). So it would be something like:
$('get_social_wrap a').hover(function(){
$(this).stop().animate({
backgroundPosition : '50% 25px'
}, 'easeInOutElastic');
}, function(){
$(this).stop().animate({
backgroundPosition : '50% 0px'
}, 'easeInOutElastic');
});
learn more about animation syntax and easing here http://api.jquery.com/animate/.
回答3:
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
and the Easing Plugin from here
http://gsgd.co.uk/sandbox/jquery/easing/
The Final Code will be like this, Enjoy :)
<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 = 'easeOutBounce';
$('.follow_fb_link, .follow_twitter_link, .follow_rss_link').css({backgroundPosition: '0px 0px'})
.mouseover(function(){
$(this).stop().animate({backgroundPosition:'0 -22px'},200, easing)
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:'0 0'},200, easing)
});
});
</script>
来源:https://stackoverflow.com/questions/7396445/how-to-get-the-same-jquery-hover-effect-for-this-social-icons