Social sites slider

Question

I tried to make a social media slider with jQuery, HTML and CSS. This is available as a Fiddle.

Can I improve or debug any elements of it?

$(document).ready(function() {
  $('.sa').hover(
  function() {
 
    $(this).css("margin-left") == "130px"
    {
        $('#sociallili').stop().animate({"margin-left": '+=130'});
    }
  },
    function(){
    {
        $('#sociallili').stop().animate({"margin-left": '-=130'});
    }
    }

  );
         });

div#sociallili {
    width:250px;
    height:50px;
    margin-left: -200px;
}
div#sociallili>a.sa {
    width:250px;
    height:50px;
    display:block;
    background-color:green;
    border:solid 1px no-color;
    border-radius:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slili" id="sociallili">
    <a class="sa" href="#"><br/></a>
    </div>

Answer 1

This seems like a job you should use CSS3 transitions for, as well as using the correct border-radius to only make your top right and bottom right corners rounded, which means you can use this element without having to calculate it. You should also use transform, that way your element can have any size and it will work as expected:

body { 
  margin: 0; 
  padding: 0;
}
div.socialList {
  width: 250px;
  height: 50px;
  -webkit-transform: translateX(-80%);
  transform: translateX(-80%);
  /* You can even use calc() to allow a certain amount of pixels to be visible. */
  -webkit-transform: translateX(calc(-100% + 40px));
  transform: translateX(calc(-100% + 40px));
  -webkit-transition: -webkit-transform 400ms;
  transition: transform 400ms;
}

div.socialList > a {
  width: 250px;
  height: 50px;
  display: block;
  background-color: green;
  /* `no-color` does not exist. Just use border: none.*/
  border: none;
  border-radius: 0 15px 15px 0;
}
div.socialList:hover {
  -webkit-transform: translateX(0);
  -webkit-transform: translateX(calc(0px));
  transform: translateX(0);
  transform: translateX(calc(0px));
}

<div class="socialList">
    <a href="#"><br/></a>
</div>

I have use -webkit- prefixes because I use Safari, so be sure to use all prefixes. Apart from this, I used calc() inside one of the statements, this is the last one I do. This is because the calc allows you to set the amount of pixels that poke out more accurately. IE9, however, does not support using calc inside the transform statement, so the 80% will work in those.

This is a case where Javascript would do more harm than good and the tools are provided. Only older browsers would have to use JS, and you might as well simple give them no transition whatsoever. If you want a fallback you could still use your margin fallback for older browser and use calc() to reset the margin (margin: -200px; margin: calc(0px);).

(Please be aware that transform still uses the original space of the element in the document flow, so using a margin with a CSS transition might be the best solution depending on where you are going to use it)