我正在使用jQuery为我具有的
元素设置淡入过渡的动画。这是代码：
这是我正在逐渐消失的
$(document).ready(function() {
...
function calculate() {
...
if ($("#results").css('display') === 'none') {
console.log("fadein");
$("#results").show("normal", function() {
console.log("animation complete");
});
}
...
}
}
这是我正在逐渐消失的
元素：
实际上，褪色效果很好。但是，一旦动画完成，该元素就会突然在页面上跳大约20个像素。 （我也可以说动画将元素放置在其预期位置下方约20个像素处，然后在完成后将该元素向上跳跃20个像素。）如何解决此问题？
（我应该提到，这个跳跃的错误同时发生在Chrome和Firefox中）
编辑：
我实际上没有太多的样式表，但是这里是：
如果有什么用，这是我的整个文档，因为它足够简短。
编辑2：这是完整的代码，因为它不是太长：http://pastebin.com/kfjpkSBr
<div id="results">
<p>Input equation: <span id="eq" class="result"></span></p>
<p>Roots: <span id="root1" class="result"></span>, <span id="root2" class="result"></span></p>
</div>
实际上，褪色效果很好。但是，一旦动画完成，该元素就会突然在页面上跳大约20个像素。 （我也可以说动画将元素放置在其预期位置下方约20个像素处，然后在完成后将该元素向上跳跃20个像素。）如何解决此问题？
（我应该提到，这个跳跃的错误同时发生在Chrome和Firefox中）
编辑：
我实际上没有太多的样式表，但是这里是：
<style type="text/css">
.result {
color: blue;
}
#results {
display: none;
}
input[type="text"] {
width:50px;
}
</style>
如果有什么用，这是我的整个文档，因为它足够简短。
<body>
<p><input type="text" maxlength="10" id="input_a" class="variable"/>x^2 +
<input type="text" maxlength="10" id="input_b" class="variable"/>x +
<input type="text" maxlength="10" id="input_c" class="variable"/> = 0</p>
<p><button type="submit" disabled="disabled">Calculate</button>
<button type="reset">Clear</button></p>
<div id="results">
<p>Input equation: <span id="eq" class="result"></span></p>
<p>Roots: <span id="root1" class="result"></span>, <span id="root2" class="result"></span></p>
</div>
</body>
编辑2：这是完整的代码，因为它不是太长：http://pastebin.com/kfjpkSBr
最佳答案
根据原始帖子之后的讨论，确定了p元素的默认边距和填充会导致动画跳转。
只需从位于动画p元素内的results元素中删除边距和填充即可解决此问题。这可能是由于jQuery中的动画逻辑中的错误所致，该错误会计算出要动画化的元素的最终所需尺寸。
编辑：另外，仅需注意一下，可以通过width和height CSS属性为动画元素提供定义的尺寸，从而解决许多基于JS的动画问题。根据所使用的特定（jQuery）动画及其所应用的元素，可能需要将边距和/或填充值移动到spacer元素以保持一致的过渡。