Question

I want to create a page where a table would be faded in as it loads (from transparent to opaque). I’ve tried using:

$(document).ready(function(){
    $('#table1').hide();
    $('#table1').fadeIn(1000);
  });

And it kind of works, but the table shows up, quickly disappears and then smoothly fades in. Is there a way to achieve the fadein without the table appearing beforehand?

Answer 1

What is happening:

• the table is ‘display:table;’ by default.
• the browser reads the DOM and displays the table
• jQuery hides the table and does the animation

Set inside your CSS display:none; for your table:

#table1{
   display:none;
}

jQuery:

$('#table1').fadeIn(1000);