問題：アニメーション中に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 ANSWER：（トリックは以下ものの明確に、あなたのいくつかの例では真実ではない作品！）

が、私は様々な非でこの問題に遭遇しましたFirefoxやChromeを含むIEブラウザ。アニメーション化しているコンテナ要素にインラインスタイル（yuck！）を追加することで回避できました。

必要なインラインスタイルは、display:block;に加え、すべての余白幅を明示的に設定します。例：

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

これは動作させるインラインスタイルです。このためにCSSを使用しても問題は回避されません。

2つの異なる要素が表示されているため、設定が少し複雑です。インラインスタイルを添付するための適切な要素を見つけるために実験を行う必要があります。