相対位置とjQueryだからここ

Question

をアニメーション化は問題だ：

私はスライダーのメニューを作成していると私は余裕を持って、それを中央にしようとするまで、すべてが正常に働いていた：0自動;

私は強く、相対的な配置と私が使用しているJquery .animate関数から来ていると思います。だから私は同じ結果を達成する別の方法を探しています！

ここで問題

http://jsfiddle.net/jwsh7/（画像はので、私はすべてのものの上に境界線を入れ、問題が緑の縁取りのdivである含めることがcouldntの）

P.S.Removeマージンをいじるです：0自動;それは私がそれを望むように動作を確認し、あまりにも

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> 

と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

あなたはアニメーションを実行するときに追加オフセットを考慮に入れる必要があります。説明するのは難しい、この更新されたバイオリンを見てみましょう：そのために非常に多くの

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

問題は、両方を使用していることですマージン、およびスライドの位置を決める位置にあり、矛盾しています。それをデッドセンターにするには、スライダの-0.5 *幅の余白を使い、次に左に50％を使います。あなたが#contentを中央にすると

#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; 
}