jQuery将固定或绝对定位的元素移动到左侧或右侧

我在玩一个想法，在那里我想模仿主要容器元素实际上左右移动的Facebook移动应用程序。然而，我已经尝试了这几种方式，我想要移动的元素似乎调整了大小而不是移动，我不知道是什么或为什么它会这样做，而不是按我期望的方式移动。jQuery将固定或绝对定位的元素移动到左侧或右侧

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

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

http://jsfiddle.net/4GF8c/

的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>

来源

2012-12-08 chris

你需要修复你的 “isMenuOpen” 状态。这不是一个二元测试，而是一个3路测试。它可以是左开的，右开的或关闭的。你的功能需要能够解决这个问题，否则它会动画wrap_main div的一边而不设置另一边。您需要检查当前偏移量并使用它来计算位置应该在的位置。在这里看到：using jQuery .animate to animate a div from right to left?

有了绝对定位的元素，我会建议动画左/右方向定位，而不是利润，因为利润可以解释为盒模型的一部分（在某些浏览器），并影响其他项目的布局在页面上。当你这样做时，一定要确保这些链接不会在视图外动画。

编辑：我解雇了我的答案，没有演奏足够的小提琴。这应该让你朝着正确的方向前进。抱歉!

来源

2012-12-08 23:55:32

isMenuOpen逻辑并不完整，而且我明白，如果对方是开放的（或者在当时开放的过程中），我打算在这里设置停止点。然而，在我到那之前。我意识到，当我点击从右侧打开的容器时，容器中的内容停留在屏幕上，而容器重新调整大小。这不是渴望。就自身的余裕而言，我也尝试过。但是我不会发布各种版本的相同代码来证明我做过，尽管我在原始文章中提到了它 – chris

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

所以第一个逻辑。我的内容包含“主”元素，如果您称之为绝对/固定位置。这基本上将它从DOM中分离出来。基于百分比的高度和宽度不起作用。因此要创建一个完整高度，固定/绝对的全宽度元素的效果。我需要告诉元素属性left:,right:,top:,bottom:（css）全部设置为零，因此4个点将在所有侧面上触摸“0”，基本上将它们拉伸以使其适合。

所以。那是我的问题。通常移动一个固定的元素或绝对定位的元素，你会完全按照我试图做的。然而，几乎所有的原因，当你设置绝对或固定的，你可能只是设置左上角，或右上角，或分别相同，但底部。

所以，因为元素的样式要留在所有的四个点上，所以当我想将元素x%左右移动到任意方向时，我必须补偿这两个方向，所以如果我想正确使用元素，我需要做left:10%;right-10%来补偿双方的移动。

最后我最后做的是在修改在任一方向正负现在整个元件运动，而不是在不经意间调整的原因我只是在讲一个侧面移动，而不是其他

。希望对未来玩家有意义

来源

2012-12-09 00:44:53 chris

jQuery将固定或绝对定位的元素移动到左侧或右侧

回答

相关问题