Home/ Questions/Q 890691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:46:25+00:00

Why does all content get jerked downwards before fading in the following, and how

  • 0

Why does all content get jerked downwards before fading in the following, and how can i fix it?
Using FireFox 3.6.3, thanks in advance.

<html>
    <head>
        <script type="text/javascript" language="javascript" src="http://localhost/javascript/jquery-1.4.2.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function(){   
                $("#button").click(function(){
                    $("*").fadeTo("slow",0.0);
                }); 
            });
        </script>
    </head>
    <body>
        <p>Just a normal paragraph doing my job!</p>
        <p>Me too!</p>
        <input type="button" id="button">
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It has something to do with trying to fade all elements, including those outside the <body>. Try:

    $("body > *").fadeTo(..)

    But why would you want to fade every single element, when you can simply do a fade on the body itself.

    $("body").fadeTo(..)

    Edit: Some more research shows that when trying to fade the <style> and <head> elements, in no particular order, causes everything to move down. Don’t know why yet, but you can see an example here – http://jsfiddle.net/UKn8r/2/

    Edit 2: Ok, I think I may have a reason here. The <head> and its children elements such as <style>, <script>, etc. are by default set to display: none in the user agent’s stylesheet. When fading them out, jQuery ends up setting their display property to display: block. Now the contents of these child elements are not meant to be displayed on the screen, but by setting them to display: block, it gets displayed as a horizontal block about 20px high with no content, which shifts everything else downwards. Note that if you were to empty out the <script> element and make the onclick inline, then you wouldn’t see the jump on Firefox since the element will be empty and not consume any space on screen even when displayed as a block. So changing it to:

    <html>
    <head>
        <script src="http://localhost/javascript/jquery-1.4.2.js"></script>
    </head>
    <body>
        <p>Just a normal paragraph doing my job!</p>
        <p>Me too!</p>
        <input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
    </body>
</html>

    will not cause any jumps.

    Also, your original code verbatim, will work properly on Webkit browsers (Chrome, Safari) as the display style property for <script> elements does not get overridden as block. For these browsers, however, if you were to have a style element with some content inside it, then you would see the same behavior as <style> will have an inline style attribute having display: block. Now it may seem utterly useless to have something like, <style style="display: block; opacity: 0">..</style>, but this is just an explanation for why you’re seeing the behavior that you’re seeing. So to reproduce the same problem on these browsers, try this code:

    <html>
    <head>
        <script src="http://localhost/javascript/jquery-1.4.2.js"></script>
        <style>p {}</style>
    </head>
    <body>
        <p>Just a normal paragraph doing my job!</p>
        <p>Me too!</p>
        <input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
    </body>
</html>

    The <style> property must have some content, and not pure whitespace, so I put the junk p {} there.

    This concludes my wasteful search for something that shouldn’t be done in the first place 🙂

    • 0