我有一个 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;
}
最佳答案
更新:
这个问题似乎是由于在您正在处理的元素上使用 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 并不能解决问题。
您的设置有点复杂,因为有两个不同的元素被隐藏和显示,因此您可能需要尝试找到正确的元素来附加内联样式。
关于jquery - 问题 : jQuery snaps div left while animating,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4763253/