问题：jQuery在设置动画时向左捕捉div

我有一个div，我正试图换成另一个具有剪辑效果的div。但是，当我在Firefox中执行此操作时，它会在动画发生时捕捉剩余的内容，然后在完成后将其返回到中心

它在IE6（gasp！仍然是我工作中的标准，正在努力更新），但在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>

更新： 此问题似乎是由于在正在模拟的元素上使用

marginleft:auto

和

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

是内联样式使它工作。为此使用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;
}

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

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