jQuery .fadeIn() beim Laden der Seite?

Question

Ich versuche, etwas Code einzurichten, so dass ich ein habe, das zuerst ausgeblendet wird, aber dann eingeblendet wird, nachdem die Seite geladen wurde.

Ich habe den folgenden HTML-Code:

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

dann auch ich diesen CSS-Code haben, der die <div> versteckt. Schließlich

div.hidden 
{ 
    display: none 
} 

, ich habe meine jQuery:

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

Was ich hatte gehofft, war geschehen würde, dass die erste .fadeOut() würde die fade out, würde die removeClass von der CSS stoppen sie versteckt, und das letzte .fadeIn() würde es wieder auf die Seite verblassen. Leider hat das nicht funktioniert.

Sie den Code hier sehen können: Fiddle

So kann mir bitte jemand sagen, wie man eine <div>, bis eine Seite geladen wird versteckt zu halten, und es dann verblassen jQuery in Verwendung?

Danke!

Answer 1

Das Problem fadeIn Arbeiten auf versteckte Elemente ist, wenn Sie die versteckte Klasse entfernen, bevor das fadeIn() das Element aufgerufen wird, wird vollständig angezeigt, so gibt es nichts zu fadeIn()

Es sollte sein

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

Demo: Fiddle

Answer 2

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); 
}); 

Answer 3

HTML-Code:

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

jquery Code:

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

Change the jquery show()/hide() animation?

Answer 4

//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"); 
    }); 

ich auf Bilder testeten .Sie auch auf Text wieder ..