Question

所以这就是问题所在：

我正在创建一个滑块菜单，一切正常，直到我尝试将其与边距居中：0 auto;

我强烈认为问题来自相对定位和我正在使用的Jquery .animate函数。所以我正在寻找另一种方法来实现相同的结果！

这是问题的小提琴

http://jsfiddle.net/jwsh7/（图片不能包含所以我在所有内容上都设置了边框，问题在于绿色边框div）

P.S.Remove margin：0 auto;看它工作，因为我也想要它

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>

AND 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

当你居中#content时，你必须在做动画时考虑额外的偏移。很难解释，看看这个更新的小提琴：

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

相对位置和Jquery动画

2 个答案: