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將固定或絕對定位的元素移動到左側或右側

回答

相關問題