Vị trí tương đối và Jquery animate

Question

Vì vậy, đây là vấn đề:

Tôi đang tạo một menu trượt và mọi thứ hoạt động tốt cho đến khi tôi cố căn giữa nó với lề: 0 auto;

Tôi mạnh mẽ nghĩ rằng sự cố xuất phát từ vị trí tương đối và hàm Jquery .animate mà tôi đang sử dụng. Vì vậy, tôi đang tìm kiếm một cách khác để đạt được kết quả tương tự!

Dưới đây là một fiddle với các vấn đề

http://jsfiddle.net/jwsh7/ (hình ảnh couldnt được bao gồm vì vậy tôi đặt một biên giới trên tất cả mọi thứ, vấn đề là với các màu xanh lá cây giáp div)

lề P.S.Remove: 0 auto; để xem nó hoạt động như tôi muốn nó quá

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> 

VÀ 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

Khi bạn căn giữa #content bạn phải tính đến bù đắp bổ sung khi thực hiện hoạt ảnh. Khó để giải thích, hãy nhìn vào fiddle cập nhật này:

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

Vấn đề là bạn đang sử dụng cả lề và vị trí để định vị trang trình bày và chúng xung đột nhau. Để làm cho nó chết trung tâm, sử dụng một margin-trái đó là -0,5 * chiều rộng của thanh trượt, và sau đó trái: 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; 
}