문제점 : jQuery가 animating하는 동안 div 왼쪽 스냅

Question

div가 클립 효과가있는 다른 div로 바뀌려고합니다. 그러나 파이어 폭스에서이 작업을 수행하면 애니메이션이 진행되는 동안 남아있는 컨텐츠가 스냅 된 다음 완료되면 센터로 리턴됩니다.

IE6에서 예상대로 작동합니다 (여전히 내 작업의 표준이며 업데이트를 위해 캠페인 중입니다).하지만 Firefox에서는 작동하지 않습니다.

내가 뭘 잘못하고 있니?

자바 스크립트 :

<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 답변 : (트릭 아래 비록 명확하게, 당신 어떤 경우에는 사실이 아니다 작품!)

나는 다양한 비에이 문제로 실행했습니다 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를 사용하여 문제를 예방할 수는 없습니다.

두 개의 다른 요소가 숨겨져 표시되므로 설정이 약간 복잡하므로 인라인 스타일을 첨부 할 올바른 요소를 찾으려면 실험해야 할 수 있습니다.