How would i implement JavaScript into this

Question

Hey Everyone is i have an social bar that i made with CSS and html and i was wondering instead of making it show Quickly how would i implement JavaScript so i can pick the speed that the image slides up This is my code

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>

Here is the jsFiddle -> http://jsfiddle.net/Kf5CS/

You should probably use CSS animations instead of javascript. Use: transition: background-position 1s; with the relevant vendor prefixes. — Rob Farr
– Rob Farr, Commented Oct 7, 2013 at 15:02
Why do you want to use JavaScript? You could do that with CSS animations/transitions. — gnclmorais
– gnclmorais, Commented Oct 7, 2013 at 15:02

Liauchuk Ivan · Accepted Answer · 2013-10-07 15:04:42Z

2

 a.sh-Facebook {

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

 }

So, as you can see, you should use "transition" property to let you icons move, you can setany duration you want in "duration" property

answered Oct 7, 2013 at 15:04

Liauchuk Ivan

2,0233 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How would i implement JavaScript into this

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related