pozycja względna i Jquery animowanie

Question

Więc tu jest problem:

Tworzę menu suwak i wszystko działa dobrze, dopóki próbuję go z centrum margin: 0 auto;

Zdecydowanie uważam, że problem wynika z pozycjonowania względnego i używanej funkcji .animate Jquery. Więc szukam innego sposobu na osiągnięcie tego samego rezultatu!

Oto skrzypce z problemem

http://jsfiddle.net/jwsh7/ (obraz nie mógł być to więc umieścić obramowanie na wszystko, problem jest z zielonego graniczy div)

margines P.S.Remove: 0 auto; zobaczyć to działa jak chcę go zbyt

CSS:

body { 
margin: 0; 
padding:0; 
} 



#content { 
width: 625px; 
border: 1px solid red; 
} 



#content div.slider 
{  
    position:relative; 
width: 50px; 
height: 100px; 
background-image:url(images/rond.png); 
background-repeat:no-repeat; 
background-position:center; 
background-size:cover; 
z-index: 2; 
top: 110px; 
left: 25px; 
border: 1px solid red; 
} 

.menu 
{ 
color:#00C; 
font-size:18px; 
font-family:"OnomatoShark!"; 
position:absolute; 
width:50px; 
height:100px; 
background-image:url(images/ligne_barre.png); 
background-position:center; 
background-repeat:no-repeat; 
cursor:pointer; 
border: 1px solid red; 

} 

.menu p 
{ 
width: 150px; 
float: left; 
position:absolute; 
top: -25px; 
left: 10px; 
} 

.menu p:hover 
{ 
width: 150px; 
float: left; 
position:absolute; 
top: -25px; 
color:red; 
} 

#barre 
{ 
position:relative; 
width:600px; 
height:28px; 
background-image:url(images/ligne.png); 
background-position:center; 
list-style-type:none; 
top: 25px; 
padding:0; 
border: 1px solid red; 

} 

#sousMenu1 { 
margin: 0; 
padding: 0; 
margin-top: 90px; 
background-image:url(images/sousmenu.png); 
background-position:left; 
background-repeat:no-repeat; 
overflow:hidden; 
float:left; 
height:150px; 
display:none; 
text-align:left; 
} 

#sousMenu2 { 
margin: 0; 
padding: 0; 
margin-top:90px; 
margin-left: 10px; 
background-image:url(images/sousmenu.png); 
background-position:left; 
background-repeat:no-repeat; 
overflow:hidden; 
float:left; 
height:150px; 
display:none; 
} 

#sousMenu3 { 
margin: 0; 
padding: 0; 
margin-top: 90px; 
margin-left: 10px; 
background-image:url(images/sousmenu.png); 
background-position:left; 
background-repeat:no-repeat; 
height:150px; 
width: 250px; 
overflow:hidden; 
float:left; 
display:none; 
} 

#sousMenu4 { 
margin: 0; 
padding: 0; 
margin-top: 90px; 
margin-left: 10px; 
background-image:url(images/sousmenu.png); 
background-position:left; 
background-repeat:no-repeat; 
height:150px; 
overflow:hidden; 
float:left; 
display:none; 
} 


ol { 
text-align:left; 
padding-top: 20px; 
} 

ol a{ 
text-decoration:none; 
} 

HTML:

<div class='slider'></div> 

    <ul id="barre"> 
     <li class="menu" id="option1"><p>Accueil</p></li> 

     <li class="menu" id="option2"> 
     <p>Animation</p> 
      <ul class="sous-menu" id="sousMenu1"> 
       <ol><a href="#">Histoire</a></ol> 
       <ol><a href="http://google.com">Avancées technologiques</a></ol> 
      </ul> 
     </li> 

     <li class="menu" id="option3"> 
     <p>Techniques</p> 
      <ul class="sous-menu" id="sousMenu2"> 
       <ol><a href="#">Rotoscopie</a></ol> 
       <ol><a href="#">Trait</a></ol> 
      </ul> 

     </li> 

     <li class="menu" id="option4"> 
     <p>Fondements</p> 
      <ul class="sous-menu" id="sousMenu3"> 
       <ol><a href="#">Processus de production</a></ol> 
       <ol><a href="#">Interpolation</a></ol> 
       <ol><a href="#">Guide de mouvement</a></ol> 
      </ul> 
     </li> 


     <li class="menu" id="option5"><p>Principes</p></li> 

     <li class="menu" id="option6"><p>Effets Avancés</p> 
      <ul class="sous-menu" id="sousMenu4"> 
        <ol><a href="#">Rotation</a></ol> 
      </ul> 
     </li> 
    </ul> 



    </div> 

I JS:

<script type="text/javascript"> 
$(document).ready(function() { 

    function sousmenuCache(){ 

     $("#sousMenu1").hide("fast"); 
     $("#sousMenu2").hide("fast"); 
     $("#sousMenu3").hide("fast"); 
     $("#sousMenu4").hide("fast"); 

     } 

    $("#option1").click(function(){ 
     sousmenuCache(); 
    }); 

    $("#option2").click(function(){ 
     sousmenuCache(); 
     $("#sousMenu1").delay(300).show("slow"); 
    }); 

    $("#option3").click(function(){ 
     sousmenuCache(); 
     $("#sousMenu2").delay(300).show("slow"); 
    }); 

    $("#option4").click(function(){ 
     sousmenuCache(); 
     $("#sousMenu3").delay(300).show("slow"); 
    }); 

    $("#option5").click(function(){ 
     sousmenuCache(); 
    }); 

    $("#option6").click(function(){ 
     sousmenuCache(); 
     $("#sousMenu4").delay(300).show("slow"); 
    }); 




    // Centrer la barre dans le container 

    var middleOption = ($("#barre").height() - ($("#option1").height() - $("#barre").height())); 

    // Création des options du menu 
    var leftOption = -70; 
    $("#content #barre li").each(function() { 
     $(this).css('top',''+middleOption+'px'); 
     $(this).css('left',''+(leftOption + 90)+'px'); 

     leftOption += 90; 
    }); 

    $(function(){ 

     $(".menu").click(function() { 
      var middleSlider = (($(".slider").width() - $("#option1").width()) * 0.5); 
      $(".slider").animate({ left: ($(this).offset().left - middleSlider) 
     }); 

    }); 
}); 
TweenMax.set("#content", {x:300}); 
}); 

</script> 

Answer 1

Kiedy centrum #content trzeba wziąć pod uwagę dodatkowe przesunięcie podczas wykonywania animacji. Trudno to wyjaśnić, przyjrzeć się tej zaktualizowanej skrzypce:

http://jsfiddle.net/jwsh7/1/

var fix = ($(document).width() - $('#content').width()) * .5; // <-- need to subtract this 

$(".menu").click(function() { 
    var middleSlider = ($(".slider").width() - $("#option1").width()) * 0.5; 
    $(".slider").animate({ 
     left: ($(this).offset().left - middleSlider - fix) 
    }); 
}); 

Answer 2

Problem polega na tym, że używasz zarówno margines i pozycja do pozycjonowania slajdu i są w konflikcie. Aby uczynić go martwym środkiem, użyj lewego marginesu o szerokości -0,5 * szerokości suwaka, a następnie w lewo: 50%;

#content div.slider { 
    position:relative; 
    width: 50px; 
    height: 100px; 
    background-image:url(images/rond.png); 
    background-repeat:no-repeat; 
    background-position:center; 
    background-size:cover; 
    z-index: 2; 
    top: 110px; 
    left: 50%; 
    border: 1px solid green; 
    margin-left:-25px; 
}