問題：jQuery的卡DIV左而動畫

Question

我有我試圖換出用夾子影響的另一個DIV一個div。但是，當我在Firefox中執行此操作時，會捕捉動畫發生時留下的內容，並在完成後將其返回到中心。

它工作在IE6預期（哇！還是我的工作標準，競選更新），但不能在Firefox。

我在做什麼錯？

的Javascript：

<script type="text/javascript"> 
     $(function(){ 
      $("#editEmpInfo").click(function(){ 
       $("#selectedEmployee").hide("clip", { direction: "vertical" }, 500, function() { 
       $("#editSelectedEmployee").show("clip", { direction: "vertical" }, 500);  
       }); 
      }); 

      $("#saveEmpInfo").click(function(){ 
       $("#editSelectedEmployee").hide("clip", { direction: "vertical" }, 500, function() { 
       $("#selectedEmployee").show("clip", { direction: "vertical" }, 500);  
       }); 
      }); 

     }); 
    </script> 

HTML：

<div class="container"> 
<div id="selectedEmployee" class="container400"> 
    <div class="currentEmp"> 
     <div class="currentEmpName"> 
      Last, First <br /> 
      <span class="empWorkUnit">Work Unit</span> 
     </div> 

     <div id="editEmpInfo"><a title="Edit" href="#"></a></div> 
       <div class="currentEmpInfo"> 
      <div>Ext: </div> 
      <div>Cell: </div> 
      <div>Home: </div> 
      <div>Pager: </div> 
      <div>Other: </div> 

      <div>Notes: </div> 
     </div> 
    </div> 
</div> 

<div id="editSelectedEmployee" class="container400 hidden"> 
    <div class="currentEmp"> 
     <div class="currentEmpName"> 
      Last, First <br /> 

      <span class="empWorkUnit">Work Unit</span> 
     </div> 
     <div id="saveEmpInfo"><a title="Save" href="#"></a></div> 
     <div class="currentEmpInfo"> 
      <div>Ext: </div> 
      <div>Cell: </div> 
      <div>Home: </div> 

      <div>Pager: </div> 
      <div>Other: </div> 
      <div>Notes: </div> 
     </div> 
    </div> 
</div> 
</div> 

CSS：

body { 
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif; 
    font-size: 12px; 
} 

.container { 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;  
} 

.container400 { 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
} 

.hidden { 
    display: none; 
} 

.currentEmp { 
    border: solid 1px #CCCCCC; 
    display: block; 
    padding: 10px; 
} 

#selectedEmployee { 
    background: #EEEEEE; 
} 

#editSelectedEmployee { 
    background: #E8EDFF; 
} 

.currentEmpName { 
    font-size: 18px; 
    color: #0077D4; 
    float: left; 
} 

.currentEmpName .empWorkUnit { 
    font-style: italic; 
    font-size: 14px; 
    font-weight: normal; 
    color: #000000; 
} 

#editEmpInfo a{ 
    display: block; 
    background: url("../images/Edit.png") no-repeat; 
    width: 32px; 
    height: 32px; 
    margin: 5px; 
    float: right; 
} 

#upOneLevel a{ 
    display: block; 
    background: url("../images/Up.png") no-repeat; 
    width: 32px; 
    height: 32px; 
    margin: 5px; 
    float: right; 
} 

#saveEmpInfo a{ 
    display: block; 
    background: url("../images/Save.png") no-repeat; 
    width: 32px; 
    height: 32px; 
    margin: 5px; 
    float: right; 
} 

.currentEmpInfo { 
    clear: both; 
} 

#callSheet { 
    border-collapse: collapse; 
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif; 
    font-size: 12px; 
    margin: 20px; 
    text-align: left; 
    min-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#callSheet th { 
    background: none repeat scroll 0 0 #B9C9FE; 
    color: #003399; 
    font-size: 13px; 
    font-weight: normal; 
    padding: 8px; 
    text-align: center; 
} 

#callSheet td { 
    background: none repeat scroll 0 0 #E8EDFF; 
    border-top: 1px solid #FFFFFF; 
    color: #666699; 
    padding: 8px; 
} 

#callSheet tbody tr:hover td { 
    background: none repeat scroll 0 0 #D0DAFD; 
} 

Answer 1

UPDATE： 這個問題似乎是在用margin-left:auto和margin-right:auto引起元素，你正在幻想。在動畫發生時，您會看到一個快照式的行爲。

要修復，只需將auto頁邊距移動到更高級容器，並將子元素設置爲width:100%。我在示例中使用了內聯樣式，但是這應該在定義樣式的任何位置工作。

像這樣：

<div class="container400" > 
    <div id="selectedEmployee" style="width:100%;"> 
     <div class="currentEmp"> 
      <div class="currentEmpName"> 
       Last, First <br /> 
       <span class="empWorkUnit">Work Unit</span> 
      </div> 

      <div id="editEmpInfo"><a title="Edit" href="#">Edit</a></div> 
        <div class="currentEmpInfo"> 
       <div>Ext: </div> 
       <div>Cell: </div> 
       <div>Home: </div> 
       <div>Pager: </div> 
       <div>Other: </div> 

       <div>Notes: </div> 
      </div> 
     </div> 
    </div> 

    <div id="editSelectedEmployee" class="hidden" style="width:100%;"> 
     <div class="currentEmp"> 
      <div class="currentEmpName"> 
       Last, First <br /> 

       <span class="empWorkUnit">Work Unit</span> 
      </div> 
      <div id="saveEmpInfo"><a title="Save" href="#">Save</a></div> 
      <div class="currentEmpInfo"> 
       <div>Ext: </div> 
       <div>Cell: </div> 
       <div>Home: </div> 

       <div>Pager: </div> 
       <div>Other: </div> 
       <div>Notes: </div> 
      </div> 
     </div> 
    </div> 
</div> 

OLD答：（以下伎倆在某些情況下真實的，但顯然不是你的！）

我對各種非碰到這個問題IE瀏覽器，包括Firefox和Chrome。我可以通過將內聯樣式（yuck！）添加到您正在動畫的容器元素來解決此問題。

所需的內嵌樣式是：display:block;加上明確設置所有保證金寬度。例如：

<div id="badSnappingElement" style="display: block; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; "> 

這是使其工作的內聯樣式。爲此使用CSS不會阻止該問題。

你的設置是有點複雜，因爲有被隱藏和顯示兩個不同的元素，所以你可能需要通過試驗來找到合適的元素（縣）的內嵌樣式的重視。