Comment estomper un div avec jQuery?

Question

J'ai un div défini comme suit dans mon fichier css:

#toolbar 
    { 
     position:relative; 
     top: 0; 
     height: 50px; 
     background-color: #F4A83D; 
     width: 100%; 
     text-align: center; 
     display: hidden; 
    } 

Puis, dans mon fichier HTML je:

<div id="toolbar"> 
     TestApp ToolBar 
     <br /> 
     You are visiting: 
     <%=ViewData["url"] %> 
    </div> 

et enfin, je le script suivant en haut de ma page html que je pensais serait FADEIN mon div quand la page se charge:

<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#toolbar").fadeIn("slow"); 
     }); 
    </script> 

Qu'est-ce que je fais mal? Il apparaît instantanément comme s'il ne disparaissait pas du tout. Est-ce que je n'accède pas correctement à ma div dans le script jquery?

---

basé au large quelques-unes des réponses que j'ai changé div:

<div id="toolbar" style="visibility: hidden"> 
     TestApp ToolBar 
     <br /> 
     You are visiting: 
     <%=ViewData["url"] %> 
    </div> 

Avec le même appel de script, et maintenant mon div caché commence et montre jamais. Que fais-je d'autre mal?

Answer 1

Voir: http://www.w3schools.com/css/pr_class_display.asp

caché n'est pas une valeur valide pour la propriété d'affichage . Vous devriez utiliser display: none;

C'est pourquoi vous le voyez instantanément, il n'a jamais été caché parce que le navigateur n'a aucune idée de quoi faire avec l'affichage: caché; déclaration.

Vous voulez probablement la visibilité: caché; propriété bien que parce que de cette façon la barre d'outils sera invisible mais rendu, de sorte qu'il prendra de l'espace dans le document. Ce qui fera que votre page entière ne sera pas bousculé lorsque vous fanent dans.

Answer 2

Vous devez d'abord masquer la div.

$('#toolbar').hide().fadeIn('slow'); 

ou comme celui-ci, de sorte que la barre d'outils ne sera pas visible pendant le chargement encore:

<div id="toolbar" style="visibility: hidden">...</div> 

$('#toolbar') 
    .css({ 
     visibility: "visible", 
     opacity: 0 
    }) 
    .fadeIn('slow') 
; 

Answer 3

$("#toolbar").css("display","none"); 

$("#toolbar").css("display","block").fadeIn('slow'); 

ou vous pouvez utiliser la fonction Animer. Animate in JQuery

Answer 4

Une chose que j'ai remarquée est votre source de script.

<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></ 

devrait être

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"> 

également

display: hidden; 

n'est pas valide devrait être

Visibility: hidden; 

pour cacher l'élément

Answer 5

ou display: none; pour cacher l'élément.

et pour montrer:

display: block; 

et la récupération de l'état de l'élément:

var state = $("#ex").css("display"); 

if(state == "none") 
{ 
... 
} 
else 
... 

Answer 6

$("button").click(function() { 
    $(".element") 
    .css({ opacity:0, visibility:"visible" }) 
    .animate({ opacity:1 }, "slow"); 
});