cambio de estado con Jquery

Question

Hola

No se si esta sea el puesto para esta pregunta?

Hice un botón con Jquery pero no me a funcionado bien lo q quiero es q cuando pase por en cima del botón se desplace de un lado de la pantalla y dentro tiene los botones de Facebook de twitter y otros grupos sociales pero cuando me salga del botón se vuelva a su puesto original.

El codigo q tengo es este

<pre lang='javascript'>
<script type="text/javascript">
$(document).ready(function(){
$(".ipad").mouseover(function(){
$(".conted").animate({left:"-10px"});
});
$(".ipad").mouseout(function(){
$(".conted").animate({left:"-200px"});
});
});

</script>
html es
<div class="conted">
<div class="ipad"></div>
<ul class="btns">
<li><a href="#"><img src="images/soc-2.png" height="35" width="36"></a></li>
<li><a href="#"><img src="images/soc-1.png" height="37" width="37"></a></li>
<li><a href="#"><img src="images/soc-3.png" height="37" width="37"></a></li>
<li><a href="#"><img src="images/soc-5.png" height="35" width="36"></a></li>
<li><a href="#"><img src="images/soc-4.png" height="35" width="36"></a></li>

</div>
y el css
.conted{
padding:5px;
height:300px;
width: 270px;
border:solid 1px #F00;
position:absolute;
top: 250px;
left:-200px;
}
.ipad{
width:242px;
height:270px;
background-image:url(../images/contc.png);

}
.btns{
height: auto;
width: 150px;
position:relative;
bottom: 200px;
}
.btns li{
height:auto;
width:auto;
position:relative;
display:block;
float:left;
margin: 5px;
}

Alguien me puede ayudar

GRACIAS