Page load Jump jquery fade in

Question

I'm using these scripts to fade in content, margin-right 0 the fourth item and to do the gray-color hovers:

$(document).ready(function(){    
    $("div.item:nth-child(4n+4)").css("margin-right", "0px");
});

$(document).ready(function(){
    $("#main").hide().fadeIn();
});

$(document).ready(function(){
    $("img.a").hover(
        function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
        },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
     });
});

The problem, is that when I load "portfolio" or "acerca" page (specially the text on the "acerca" section), the main content does a jump before the fade in. What i'm doing wrong?

Answer 1

Try to load these pics as display: none and then do the fading. Should help

Answer 2

Esteban I think you should get '#main' div hidden by default so browser didn't render it, and later in the ready callback do the fadein. To clarify, your following html:

<div id="main" class="clearfix">

could be changed to

<div id="main" style="display: none;" class="clearfix">

and then change this jquery:

$(document).ready(function(){
   $("#main").hide().fadeIn();
});

to this

$(document).ready(function(){
   $("#main").fadeIn();
});

try it, I think it'll work fine..

Btw, I'm spanish website coder currently in madrid, and I'm going to start freelancing soon, if you need some website backend code for some project you can contact me :-)