Question

我正在玩一个想法，我想模仿facebook移动应用程序，主要容器元素在物理上向左或向右移动。但是我尝试了几种方法，我想移动的元素似乎调整大小而不是移动，我不确定它做什么或为什么这样做而不是按照我期望的方式移动。

注意我已经尝试将main元素作为固定元素和绝对元素。我也试过在javascript中只使用'left'或'right'而不是'marginLeft'或'marginRight'。

所以我想知道我做错了什么？

css：

html, body{margin:0;padding:0;width:100%;height:100%;}
#wrap_main{background-color:gray;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;}
#wrap_bottom_left{background-color:aqua;width:50%;float:left;}
#wrap_bottom_right{background-color:green;width:50%;float:right;}

javascript：

    var isMenuOpen = false;
    $(document).ready(function()
    {
    //code
    });
    $('#menu_left_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginLeft:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginLeft:"0"}, 1000);
        }
    });
    $('#menu_right_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginRight:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginRight:"0"}, 1000);
        }
    });

html：

<div id="wrap_main">
    <a href="javascript:void(0);" id="menu_left_trigger">Menu</a><br>
    <a href="javascript:void(0);" id="menu_right_trigger">Sub Menu</a>
</div>
<div id="wrap_bottom_left">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>
<div id="wrap_bottom_right">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>

Answer 1

啊，好吧。我刚解决了自己的问题。所以我会在这里为那些尝试类似的人打破它。

所以第一个逻辑。我的内容如果您将其称为“主”元素，则为绝对/固定位置。这基本上与DOM分离。基于百分比的高度和宽度的含义不起作用。因此要创建固定/绝对的全高，全宽元素的效果。我需要告诉我将left:，right:，top:，bottom:（css）设置为零的元素属性，这样4个点就会触及“0”所有方面都基本上伸展它以使其适合。

因此。那是我的问题。通常移动固定元素或绝对定位的元素，你会完全按照我的尝试。但是，在设置绝对值或固定值的几乎所有原因中，您可能只设置左上角或右上角，或者分别设置为相同但是底部。

因此，因为元素被设置为保持所有四个点，所以当我想在任一方向上移动元素x%或许多像素时。我必须补偿这两个方向，所以如果我想要正确使用该元素，我需要做left:10%;right-10%以补偿双方的移动。

最终我最终做的是做出改变，在整个元素移动时，在任何一个方向都有正面和负面，而不是无意中重新调整因为我只告诉一方移动而不是另一方

希望对未来的球员有意义

Answer 2

您需要修复“isMenuOpen”状态。这不是二元测试，而是三方测试。它可以是左开，右开或闭合。你的函数需要能够解释它，否则它会设置wrap_main div的一侧动画而不设置另一面。您需要检查当前偏移并使用它来计算位置应该在哪里。见这里：using jQuery .animate to animate a div from right to left?

对于绝对定位的元素，我建议动画左/右定位而不是边距，因为边距可以解释为盒子模型的一部分（在某些浏览器中）并影响页面上其他项目的布局。执行此操作时，请确保链接不会在视图外动画。

编辑：我没有玩弄小提琴就解雇了我的答案。这应该让你朝着正确的方向前进。遗憾！

jQuery向左或向右移动固定或绝对定位的元素

2 个答案: