问题：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不会阻止该问题。

你的设置是有点复杂，因为有被隐藏和显示两个不同的元素，所以你可能需要通过试验来找到合适的元素（县）的内嵌样式的重视。