Result

jQuery

$(document).click(function() {
    $('#facebook_share , #twitter_share , #google_share').css('top', '-80px');
});

//Twitter用
$('.twitter').click(function() {
    $('#twitter_share').animate({
        opacity: 1,
        top: 10
    }, {
        queue: false,
        duration: 'slow'
    });
    $('#facebook_share , #google_share').animate({
        opacity: 0, top: '-80px'
    }, {
        queue: false,
        duration: 'slow'
    });
});
//Facebook用
$('.facebook').click(function() {
    $('#facebook_share').animate({
        opacity: 1,
        top: 10
    }, {
        queue: false,
        duration: 'slow'
    });
    $('#twitter_share , #google_share').animate({
        opacity: 0,
        top: '-80px'
    }, {
        queue: false,
        duration: 'slow'
    });
});
//Google+用
$('.google').click(function() {
    $('#google_share').animate({
        opacity: 1,
        top: 10
    }, {
        queue: false,
        duration: 'slow'
    });
    $('#facebook_share , #twitter_share').animate({
        opacity: 0,
        top: '-80px'
    }, {
        queue: false,
        duration: 'slow'
    });
});​

ToDo:あとで軽量化

css

#social {
    background: #eee;
    width: 126px;
    height: 30px;
    margin: 0 auto;
    padding: 20px 0px 10px 10px;
    position:relative;
    z-index:2;
}

#social li {

    width: 32px;
    height: 35px;
    float:left;
    margin-right:10px;
    position: relative;
}

#social li:hover {
    cursor: pointer;
    opacity: 1.0;
}

#social li:active {
    postion: absolute;
    top:1px;
}

#social li.facebook {
    background-position: -32px 0px;
}

#social li.google {
    background-position: -64px 0px;
}

#share_buttons {
    width: 138px;
    height: 30px;
    margin:0 auto;
    position:relative;
    z-index:1;
}

#twitter_share {
    position: absolute;
    top: -80px;
    left: 20px;
    opacity:0;
}

#facebook_share {
    position: absolute;
    top: -80px;
    left:22px;
    opacity:0;
}

#google_share {
    position: absolute;
    top: -80px;
    left:37px;
    opacity:0;    
}​

html

<ul id="social">
    <li class="twitter">Twi</li>
    <li class="facebook">FB</li>
    <li class="google">G+</li>
</ul>

<div id="share_buttons">

    <!-- twitter -->
    <p id="twitter_share"><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</p>
    
    <!-- facebook -->
    <p id="facebook_share"><a name="fb_share"></a> 
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
    type="text/javascript"></script></p>
        
    <!-- google plus -->
    <p id="google_share">
    <g:plusone size="medium"></g:plusone>
        </p>
    
</div>
        
        <!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>​

via

Animated Social Icons with Share Buttons