我将如何将JavaScript实现到这个应用程序中

大家好，我有一个用CSS和html制作的社交栏，我想知道的不是让它快速显示我应该如何实现JavaScript，这样我才能加快图像的滑动速度这是我的代码

CSS

 .sharing-cl {

     overflow:hidden;

     margin:0;

     padding:0;

     list-style:none;

 }

 .sharing-cl a {

     overflow:hidden;

     width:75px;

     height:30px;

     float:left;

     margin-right:5px;

     text-indent:-200px;

     background:url("http://theirondoor.x10.bz/V2/images/share-sprite.png") no-repeat;

 }

 a.sh-Youtube {

     background-position:-214px -40px;

 }

 a.sh-Twitter {

     background-position:-61px -40px;

 }

 a.sh-Rss {

     background-position:-143px -40px;

 }

 a.sh-Facebook {

     background-position:20px -40px;

 }

 a.sh-Youtube:hover {

     background-position:-214px 1px;

 }

 a.sh-Twitter:hover {

     background-position:-61px 1px;

 }

 a.sh-Rss:hover {

     background-position:-143px 1px;

 }

 a.sh-Facebook:hover {

     background-position:20px 1px;

 }

 #text {

     margin-top:3em;

     font-weight:bold;

     font-family:helvetica, arial, sans-serif;

 }

 #text a {

     text-indent:0;

     height:auto;

     text-align:center;

     font-size:11px;

     padding-top:35px;

     color:#999;

     text-decoration:none;

 }

HTML

<ul class="sharing-cl" id="text">
    <li></li>
    <li><a class="sh-Facebook" href="">Facebook</a>
    </li>
    <li><a class="sh-Twitter" href="">Twitter</a>
    </li>
    <li><a class="sh-Rss" href="">  Rss Feed</a>
    </li>
    <li></li>
    <li><a class="sh-Youtube" href="">Youtube</a>
    </li>
</ul>

这里是jsFiddle->

---

因此，如您所见，您应该使用“transition”属性来移动图标，您可以在“duration”属性中设置您想要的任何持续时间

您可能应该使用CSS动画而不是javascript。使用：

转换：背景位置1s带有相关的供应商前缀。为什么要使用JavaScript？您可以通过CSS动画/转换来实现这一点。
 a.sh-Facebook {

     background-position:20px -40px;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;

 }