Problème: jQuery accroche div lors de l'animation

Question

J'ai une div que j'essaie d'échanger pour une autre div avec un effet de clip. Cependant, lorsque je fais cela dans Firefox, il capture le contenu restant pendant l'animation et le renvoie au centre une fois l'opération terminée.

Cela fonctionne comme prévu dans IE6 (gasp! Toujours la norme à mon travail, campagne pour mettre à jour), mais pas dans Firefox.

Qu'est-ce que je fais mal?

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

MISE À JOUR: Ce problème semble être causé par l'utilisation margin-left:auto et margin-right:auto sur la éléments que vous animez. Pendant l'animation, vous obtenez un comportement instantané à gauche.

Pour corriger, il suffit de déplacer les marges auto vers le conteneur de niveau supérieur et de définir les éléments enfants sur width:100%. J'ai utilisé des styles en ligne dans mon échantillon, mais cela devrait fonctionner partout où les styles sont définis.

Comme ceci:

<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> 

RÉPONSE VIEUX: (le truc fonctionne en dessous de vrai dans certains cas, bien évidemment pas le vôtre!)

J'ai rencontré ce problème sur divers non Les navigateurs IE, y compris Firefox et Chrome. J'ai été capable de contourner cela en ajoutant des styles en ligne (beurk!) À l'élément conteneur que vous animez.

Les styles en ligne requis sont les suivants: display:block; et la définition explicite de toutes les largeurs de marge. Par exemple:

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

Ce sont les styles en ligne qui le font fonctionner. L'utilisation de CSS pour cela n'empêchera pas le problème.

Votre configuration est un peu compliquée car deux éléments différents sont cachés et affichés, vous devrez donc expérimenter pour trouver le ou les bons éléments auxquels attacher les styles en ligne.