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>

OLD ANSWER：（以下诀窍在某些情况下有效，但显然不属于你！）

我在各种非IE浏览器上遇到过这个问题，包括Firefox和Chrome。我能够通过将内联样式（yuck！）添加到您正在设置动画的容器元素来解决它。

所需的内联样式为：display:block;并明确设置所有边距宽度。例如：

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

这是内联样式使其工作。使用CSS不会阻止此问题。

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

问题：jQuery在动画时捕捉div

1 个答案: