كود ايقونات المواقع الاجتماعية مع الانزلاق وتاثير الجي كويري

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
jQuery(function() {
jQuery('#navigation a').stop().animate({'marginLeft':'-20px'},1000);
jQuery('#navigation > li').hover(
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},100);
},
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-20px'},1000);
}
);
});
</script>

<style type="text/css">
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top:30px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 32px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
margin-top: 4px;
width: 32px;
height: 32px;
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-khtml-border-top-right-radius: 5px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation li a:hover {opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
ul#navigation .feed a {
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/1140.png);
}
ul#navigation .facebook a {
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/263.png);
}
ul#navigation .twitter a {
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/344.png);
}
ul#navigation .tuenti a {
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/419.png);
}
ul#navigation .youtube a {
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/518.png);
}
</style>



<ul id="navigation">
<li class="feed"><a href="http://www.sidiamer.com/feed/" target="blank" title="Feed RSS"></a></li>
<li class="facebook"><a href="#" target="blank" title="Facebook"></a></li>
<li class="twitter"><a href="http://twitter.com/#" target="blank" title="Twitter"></a></li>
<li class="tuenti"><a href="http://www.tuenti.com/#" target="blank" title="Tuenti"></a></li>
<li class="youtube"><a href="http://www.youtube.com/user/#" target="blank" title="Youtube"></a></li>
</ul>