jquery - 问题 : jQuery snaps div left while animating

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

更新:这个问题似乎是由于在您正在处理的元素上使用 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>

旧答案:(以下技巧在某些情况下有效，但显然不是您的!)

我在各种非 IE 浏览器(包括 Firefox 和 Chrome)上遇到过这个问题。我能够通过向您正在设置动画的容器元素添加内联样式(糟糕!)来解决这个问题。

所需的内联样式是:display:block; 加上明确设置所有边距宽度。例如:

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

正是内联样式让它发挥作用。为此使用 CSS 并不能解决问题。

您的设置有点复杂，因为有两个不同的元素被隐藏和显示，因此您可能需要尝试找到正确的元素来附加内联样式。