2013-03-19 7 views
6

をアニメーション化は問題だ:相対位置とjQueryだからここ

私はスライダーのメニューを作成していると私は余裕を持って、それを中央にしようとするまで、すべてが正常に働いていた: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> 

答えて

3

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

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) 
    }); 
}); 
+0

ありがとうございましたx 1000私はそれを修正しようとしている午後全体を過ごした。 –

+0

いや、時には新鮮な目が必要なだけです。 – dfsq

1

問題は、両方を使用していることですマージン、およびスライドの位置を決める位置にあり、矛盾しています。それをデッドセンターにするには、スライダの-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; 
} 
+0

TYを!それはjs positoningに来るとき私はとてもばかげている! –

+0

私たちは皆どこかに出発しなければなりません。私の一般的なアプローチは、マージンとパディングを使用し、失敗した場合にそれらを除去して位置を使用することです。ボックスモデル! –

関連する問題