Question

I have a div that I am trying to swap out for another div with a clip effect. However, when I do this in Firefox it snaps the content left while the animation is happening and then returns it to the center upon completion.

It works as expected in IE6 (gasp! still the standard at my work, campaigning to update), but not in firefox.

What am I doing wrong?

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:
This problem seems to be caused by using margin-left:auto and margin-right:auto on the elements that you’re anmiating. While the animation is happening, you get a snap-left behavior.

To fix, simply move the auto margins to the higher-level container, and set the child elements to width:100%. I used inline styles in my sample but this should work wherever the styles are defined.

Like this:

<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: (the trick below works true in some cases, although clearly not yours!)

I’ve run into this problem on various non-IE browsers including Firefox and Chrome. I was able to work around it by adding inline styles (yuck!) to the container element that you’re animating.

The inline styles required are: display:block; plus setting all margin widths explicitly. For example:

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

It’s the inline styles that makes it work. Using CSS for this won’t prevent the problem.

Your setup is a little complicated because there are two different elements being hidden and shown, so you may need to experiment to find the right element(s) to attach the inline styles to.