La décoloration dans la page de chargement

Je suis en train d'utiliser j-requête à s'estomper dans mes pages d'administration sur la charge, mais pour une raison quelconque, le corps de l'image d'arrière-plan n'est pas affectée par la j-query. Veuillez voir le code que j'ai ci-dessous:

J-Code de Requête dans la section de la tête:

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

<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>

Code CSS:

body
{
overflow:hidden;
background:url('body.png') no-repeat;
background-size:100%;
display:none;
}

Tout ce qui est contenu à l'intérieur du corps (div /paragraphes /en-têtes, etc) fondu sur la charge que par le j-code de requête, cependant le corps de l'image d'arrière-plan (le corps.png) charge instantanément avec la page. Svp quelqu'un peut-il suggérer ce que je fais de mal avec le code ci-dessus?

vous pouvez afficher du html au lieu de corps http://jsfiddle.net/GtBPe/

OriginalL'auteur Sam Friday Welch | 2013-11-13

  1. 9

    body se comporte drôle. Vous devez envelopper le contenu de la page entière en un autre div et fade que dans.

    <body>
    <div id="wrapper">
        # Page Contents #
    </div>
</body>

    CSS:

    #wrapper{
    background-image:url('some-image.jpg');
    display:none;
}

    jQuery:

    $(document).ready(function(){
    $('#wrapper').fadeIn();
});

    Voir ce JSFiddle.

    Merci pour cela, je vais aller de l'avant avec l'enveloppe idée. Cheers
    JSFiddle lien cassé
    hey, merci man! J'avais changé mon nom d'utilisateur, mais il est de retour au travail maintenant.
    Pas de soucis Robbie Wxyz! Excellent travail sur la fixation rapide 🙂

    OriginalL'auteur Robbie Wxyz

  2. 0

    Je ne sais pas si cela aura aussi une incidence sur l'image de fond, mais vous pourriez faire de l'effet de fondu aussi sans jQuery. Au moins dans les navigateurs qui supportent CSS3:

    @keyframes fadein{
   from{opacity:0;}
   to{opacity:1;}
}
.someElement{
   animation: fadein 2s;
}
    merci pour ce - le corps de l'image de fond se charge instantanément, mais son bon de savoir que le fondu funtiopn est réalisable à l'aide de la clé-cadres ainsi que Jquery 🙂

    OriginalL'auteur ITFarmer

  3. 0

    Comme l' @ITFarmer attendre, vous pouvez le faire en CSS3, mais vous pourriez probablement aussi d'animer l'image de fond d'écran avec CSS3.

    @keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbg {
    from {
        background-image: none;
    }
    to {
        background:url('body.png') no-repeat;
    }
}

.container {
    animation: fadein 2s;
}

.body {
    animation: fadeinbg 2s;

    OriginalL'auteur pashri