Skip to main content
U
Under S.
Inspiring
April 28, 2017
Question

How to use jQuery (or anything else) to make items fade in on page load?

  • April 28, 2017
  • 2 replies
  • 363 views

Is there a quick and easy way to make DIVs (all of them, across the website) fade into view after loading instead of just appearing? Something super-quick that won't slow down the user experience any; to demonstrate that some additional effort was put in. I'm already linking to jQuery, so that's available as a resource.

Whether everything fades in at once, or in the order the browser reads them, doesn't matter to me. The latter is probably prettier to watch unfold (at least compared to your average website rendering itself).

PS: I wrote 'DIVs' but would be just as content if it applied to everything, including images or other items not contained in DIVs. I just want it to affect AT LEAST the DIVs.

EDIT: Will settle for a fade-out / fade-in during page transitions (including the original page load) if that's easier, but I doubt it is.

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    April 28, 2017

    If you want something stupidly simple you can use the callback function to fade in one div after another has loaded, example:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <title>Fade In Elements</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    $(document).ready(function() {

    $('header, .col-1, .col-2, .col-3').hide();

    $('header').fadeIn(2000, function(){

    $('.col-1').fadeIn(1000, function(){

    $('.col-2').fadeIn(1000, function(){

    $('.col-3').fadeIn(1000);

    });

    });

    });

    });

    </script>

    <style>

    * {

    box-sizing: border-box;

    }

    header {

    background-color: #ededed;

    width: 90%;

    margin: 0 auto 25px auto;

    padding: 20px;

    }

    .col-wrapper {

    display: flex;

    width: 93.3%;

    margin: 0 auto;

    }

    .col-wrapper div {

    width: 30%;

    background-color: #ededed;

    margin: 0 1.66%;

    padding: 20px;

    }

    </style>

    </head>

    <body>

    <header>

    <h1>Header</h1>

    </header>

    <div class="col-wrapper">

    <div class="col-1">Column 1</div>

    <div class="col-2">Column 2</div>

    <div class="col-3">Column 3</div>

    </div>

    </body>

    </html>

    O
    osgood_
    Legend
    April 28, 2017

    You might also want to investigate something like this example:

    https://codepen.io/annalarson/pen/GesqK

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 28, 2017

    See live demo

    Alt-Web :: Fading Page Load Demo

    Tutorial:

    jQuery Fade In Background on Page Load - http://alt-web.com/

    Nancy

    Nancy O'Shea— Product User & Community Expert
    U
    Under S.Author
    Inspiring
    April 28, 2017

    https://forums.adobe.com/people/Nancy+OShea  wrote

    See live demo

    Alt-Web :: Fading Page Load Demo

    Tutorial:

    jQuery Fade In Background on Page Load - http://alt-web.com/

    Nancy

    Thanks, but the word 'background' is throwing me off, here... what elements will this affect?

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 28, 2017

    https://forums.adobe.com/people/Under+S.  wrote

    what elements will this affect?

    Everything!  That is everything inside the background container.

    Here's another example applied to individual elements.  View source to see the code.

    Alt-Web Demos :: jQuery Slide and Fade on Page Load

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices