javascript - 我的 div 使用 show() 正确淡入，但在动画完成后它会跳起来

我正在使用 jQuery 为我拥有的

元素设置淡入动画。这是代码:

$(document).ready(function() {
    ...
    function calculate() {
        ...
        if ($("#results").css('display') === 'none') {
            console.log("fadein");
            $("#results").show("normal", function() {
                console.log("animation complete");
            });
        }
        ...
    }
}

这是我正在淡入的

元素:

<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 元素的默认边距和填充会导致动画跳转。

只需从位于动画 results 元素内的 p 元素中移除边距和填充即可解决问题。这可能是由于 jQuery 中的动画逻辑错误导致的，该错误计算正在动画的元素的最终所需尺寸。

编辑:另外，请注意，许多基于 JS 的动画问题可以通过 width 和 height CSS 属性为动画元素定义尺寸来解决.根据所使用的特定 (jQuery) 动画及其应用的元素，可能需要将边距和/或填充值转移到间隔元素以保持一致的过渡。

关于javascript - 我的 div 使用 show() 正确淡入，但在动画完成后它会跳起来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7376067/