基于jquery的侧边栏分享导航

 <div class="zzsc">
        <a href="http://www.w2bc.com/" class="lanren1">
            <img src="images/zzsc01.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
                class="lanren2">
                <img src="images/zzsc02.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
                    class="lanren3">
                    <img src="images/zzsc03.jpg" alt="爱编程" width="50" height="50" /></a>
        <a href="http://www.w2bc.com/" class="lanren4">
            <img src="images/zzsc04.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
                class="lanren5">
                <img src="images/zzsc05.jpg" alt="爱编程" width="50" height="50" /></a>
    </div>

 *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img
        {
            border: 0;
        }
        body
        {
            background: #ccc;
        }
        
        .zzsc
        {
            width: 50px;
            height: 250px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -125px;
            z-index: 900;
        }
        .zzsc a
        {
            width: 50px;
            height: 50px;
            line-height: 50px;
            float: left;
            display: block;
            text-align: right;
        }
        .zzsc .lanren1
        {
            background: #305790;
        }
        .zzsc .lanren2
        {
            background: #2BA9D2;
        }
        .zzsc .lanren3
        {
            background: #CF4C3A;
        }
        .zzsc .lanren4
        {
            background: #4698CA;
        }
        .zzsc .lanren5
        {
            background: #F9694E;
        }

  $(function () {
            $(‘.zzsc a‘).hover(function () {
                $(this).animate({ width: ‘65px‘ }, 300);
            }, function () {
                $(this).animate({ width: ‘50px‘ }, 300);
            });
        });