web-dev-qa-db-fra.com

jQuery .fadeIn () au chargement de la page?

J'essaie de configurer du code de sorte que j'ai un fichier qui est caché au début, puis qui apparaît en fondu après le chargement de la page.

J'ai le code HTML suivant:

<div class="hidden">
<p>This is some text.</p>
</div>

Ensuite, j'ai aussi ce code CSS, qui cache le <div>.

div.hidden
{
    display: none
}

Enfin, j'ai mon jQuery:

$(document).ready(function() {
    $('div').fadeOut(1);
    $('div').removeClass('hidden');
    $('div').fadeIn(1000);
});

J'espérais que le premier .fadeOut () disparaîtrait en fondu, la removeClass empêcherait le CSS de le cacher et la dernière .fadeIn () le ferait disparaître de nouveau sur la page. Malheureusement, cela n'a pas fonctionné.

Vous pouvez voir le code ici: Fiddle

Alors, quelqu'un peut-il me dire comment garder un <div> caché jusqu'au chargement d'une page, puis l'ajuster à l'aide de jQuery?

Merci!

javascriptjqueryhtmlcssfadein
11
user2962388

Le problème est que fadeIn fonctionne sur des éléments masqués. Lorsque vous supprimez la classe masquée avant d'appeler la fonction fadeIn(), l'élément est entièrement affiché, il n'y a donc rien à ajouter à fadeIn()

CA devrait etre

$(document).ready(function () {
    $('div.hidden').fadeIn(1000).removeClass('hidden');
});

Démo: Fiddle

27
Arun P Johny

Code HTML:

<div class="toshow" style="display:none;">
    This is some text.
</div>

code jQuery:

$(document).ready(function () {
    $('div.toshow').fadeIn(2200);
    // OR $('div.toshow').show(2200);
    // OR $('div.toshow').slideDown("slow");
});

Changer l'animation jQuery show ()/hide ()?

4
eladolo

http://jsfiddle.net/DerekL/Bm62Y/5/

//If you do not want the "hidden" class to be still around
$(function() {
    $('div').fadeIn(1000).removeClass('hidden');
});

//If you don't mind it, then you can just do fadeIn
$(function() {
    $('div').fadeIn(1000);
});
1
Derek 朕會功夫
//image fade in
    //set image display none
        $("img").css("display", "none");
    //call the image with fadeIn effect
    $("img").fadeIn(5000 , function(){
        $(this).css("display","normal");
    });

J'ai expérimenté des images .Vous pouvez aussi essayer du texte.

0
KAUSTUBH MISHAL