我的 div 通过 show() 正确淡入，但随后在动画完成时跳起

发布于 2024-12-03 17:17:26 字数 2025 浏览 0 评论 0原文

我正在使用 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

原文

I'm using jQuery to animate a fade-in transition for a <div> element that I have. This is the code:

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

Here is the <div> element I'm fading in:

<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>

The fading in effect works perfectly. However, as soon as the animation completes, the element suddenly jumps about 20 pixels up the page. (I could also say that the animation places the element about 20 pixels below its intended location, and then jumps the element up 20 pixels after completion.) How can I fix this?

(I should mention that this jumping bug happens in both Chrome and Firefox)

Edit:

I don't really have much of a style sheet, but here it is:

<style type="text/css">
    .result {
        color: blue;
    }
    #results {
        display: none;
    }
    input[type="text"] {
        width:50px;
    }
</style>

If it's any use at all, here's the entire body of my document, since it's short enough.

<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>

Edit 2: Here's the entire code, since it's not too long: http://pastebin.com/kfjpkSBr

分享到QQ

分享到微博