Home/ Questions/Q 6562701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:44:24+00:00

I’m using jQuery to animate a fade-in transition for a <div> element that I

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Per the discussion following the original post, the default margin and padding on the p elements was determined to cause the jump in animation.

    Simply removing the margin and padding from the p elements located within the animated results element solved the problem. This is likely due to a bug in the animation logic within jQuery that calculates the final desired dimensions of elements that are being animated.

    EDIT: Also, just to make note of it, many JS-based animation issues can be solved by giving the animated elements defined dimensions via width and height CSS properties. Depending on the specific (jQuery) animation being used, and the element it is being applied to, margin and/or padding values may need to be shifted to spacer elements to maintain consistent transitions.

    • 0