Social bar with jQuery

I'd like to make social icons bar with jQuery. I first tried with CSS3, but I didn't like the animation. I want fade in fade out effect, but I don't know how to do it with jQuery.

        <div id="social">
            <ul>
                <li><a class="twitter" href="#">Twitter</a></li>
         开发者_运维技巧       <li><a id="deviantart" href="#">Deviantart</a></li>
                <li><a id="dribbble" href="#">Dribbble</a></li>
                <li><a id="info" href="#">Info</a></li>
            </ul>
        </div>

a.twitter {
    background: url(img/twitter.png) no-repeat;
    width: 31px;
    height: 31px;
} 
a.twitter:hover {
background-position: left bottom;
}

After several hours of searching and experimenting with no luck I finally turned here. jsfiddle.net/CkUXB

It's all explained here :

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

I think that this is what you want:

Live demo

Here is a pretty cool tut I just posted on GitHub. It uses JQuery's .slideUp() and .slideDown() to show/hide the social bar.

https://github.com/YupItsZac/JQuery/tree/master/SocialDropBar

Hope it helps!

NOTE: If you want to fade instead of slide, just replace .slideUp() with .fadeout() and .slideDown() with .fadeIn()