Relative Position und JQuery animieren

Question

So, hier ist das Problem:

Ich bin ein Slider-Menü erstellen und alles funktionierte gut, bis ich versuche, es mit Rand zum Zentrum: 0 auto;

Ich glaube stark, dass das Problem von der relativen Positionierung und der Jquery .animate Funktion kommt, die ich verwende. Also suche ich nach einem anderen Weg, um das gleiche Ergebnis zu erzielen!

Hier ist eine Geige mit dem Problem

http://jsfiddle.net/jwsh7/ (Bild i umfassen könnte nicht so eine Grenze auf alles setzen, ist das Problem mit dem grünen grenzte div)

P.S.Remove margin: 0 auto;

CSS zu sehen, es arbeiten, wie ich es zu wollen:

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> 

und 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

Wenn Sie #content Zentrum haben Sie zu berücksichtigen zusätzlichen Offset, wenn Animation zu tun. Schwer, einen Blick auf diese aktualisierte Geige zu erklären, nehmen:

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

Das Problem ist, dass Sie beide verwenden Rand und Position, um die Folie zu positionieren, und sie sind widersprüchlich. Verwenden Sie einen Rand links, der -0,5 * Breite des Schiebereglers ist, und dann links: 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; 
}