Centrage menu dans div avec animation jquery

$contenu .= '<div id="principal">';
$contenu .= '<div id="kwick">';
$contenu .= '<ul class="kwicks">';
$contenu .= '<li class="kwick opt1"><span>Bague</span></li>';;
$contenu .= '<li class="kwick opt2"><span>Bracelet</span></li>';
$contenu .= '<li class="kwick opt3"><span>Chapelet</span></li>';
$contenu .= '<li class="kwick opt4"><span>Collier</span></li>';
$contenu .= '<li class="kwick opt5"><span>Manchette</span></li>';
$contenu .= '<li class="kwick opt6"><span>Pendentif</span></li>';
$contenu .= '</ul>';
$contenu .= '</div>';
$contenu .= '</div>';

#principal{
position: relative;
width:1024px;
height:469px;
margin-top: 80px;
border: 1px solid green;
}

#kwick {
position: relative;
margin-top: 84px;
margin-bottom: 84px;
/*border: 1px solid red;*/
}

#kwick .kwicks {
/*display: block;*/
height: 301px;
margin: 0;
padding: 0 0 0 0;
border: 1px solid gold;
text-align: center;
}

#kwick li {
float: left;
}

#kwick .kwick {
display: block;
height: 300px;
width: 75px;
cursor: pointer;
overflow: hidden;
background: #fff;
border-right: 2px solid #fff;
border: 1px solid red;
}

#kwick .kwick span {
display: none;
}

#kwick .opt1 {
/*background: #ccc;*/
background: url(../images/type_bijoux/bague.png) no-repeat;
}

#kwick .opt2 {
/*background: #ccc;*/
background: url(../images/type_bijoux/bracelet.png)no-repeat;
}

#kwick .opt3 {
/*background: #ccc;*/
background: url(../images/type_bijoux/chapelet.png)no-repeat;
}

#kwick .opt4 {
/*background: #ccc;*/
background: url(../images/type_bijoux/collier.png)no-repeat;
}

#kwick .opt5 {
/*background: #ccc;*/
background: url(../images/type_bijoux/manchette.png)no-repeat;
}