.hide() et .show() ne mettent pas correctement en cache la propriété d'affichage CSS

Question

Remarque: J'ai trouvé le causant de mon problème. Voir ci-dessous pour plus d'informations.

Je serai concis. Voici mon scénario:

Le fichier HTML:

<form id="login"> 
<label for="editable">i'm a label for editable</label> 
<input id="editable" type="text" /> 
</form> 

Le fichier CSS:

#login label { display: block } 

Le fichier JS:

$(document).ready(function() { 
    $('#login label').hide().show(); 
}); 

Le comportement souhaité est de montrer à nouveau l'élément avec les mêmes propriétés CSS (display: block), mais dans le DOM il semble que le label élément obtient un autre (peut-être le défaut?) Ones (dans ce cas, display: inline). Note: J'ai vérifié les fichiers HTML et CSS. Tout est correct. Le problème est dans le fichier javascript.

Vu sur les docs API de jQuery, en ce qui concerne la méthode .hide():

sans paramètre, la méthode .hide() est la plus simple façon de cacher un élément:

$ ('cible').cacher();

Les éléments correspondants seront masqués immédiatement, sans animation. Cela équivaut à peu près à appeler .css ('display', 'none'), sauf que la valeur de la propriété d'affichage est enregistrée dans le cache de données de jQuery afin que l'affichage puisse être restauré à sa valeur initiale. Si un élément a une valeur d'affichage en ligne, puis est masqué et affiché, il sera de nouveau affiché en ligne.

Vu sur les docs API de jQuery, en ce qui concerne la méthode .show():

sans paramètre, la méthode .Show() est le plus simple moyen d'afficher un élément:

$ (» cible. ').montrer();

Les éléments correspondants seront révélés immédiatement, sans animation. Cela équivaut à peu près à appeler .css ('display', 'block'), sauf que la propriété d'affichage est restaurée à ce qu'elle était initialement. Si un élément a une valeur d'affichage en ligne, puis est masqué et affiché, il sera de nouveau affiché en ligne.

Ai-je raté quelque chose? J'ai tort? Ou est juste un comportement non désiré?

Merci d'avance.

Solution

Inclure le CSS d'abord, puis la JS plus tard.

Answer 1

Incluez d'abord le CSS, puis le JS plus tard.

Answer 2

hide() et show() ne modifiez pas les propriétés de la classe CSS d'un élément.

Mettez display:none comme en ligne en style de tout ce que vous voulez cacher par défaut. Ne le mettez pas dans la classe CSS et tout ira bien.

Answer 3

Cela fonctionne très bien dans FF3.6, IE8, Safari5, Chrome et Opera10

Voici une demohttp://www.jsfiddle.net/kjwxu/

Essayez cette

$(document).ready(function() { 
    $('#login label').hide().show("fast", function() {$(this).attr("display", "block")}); 
}); 

A noter également si vous ne aimez pas le scintillement alors vous pouvez supprimer "rapide" et remplacer par 1 (ce qui signifie 1 milliseconde)

Voici un demohttp://www.jsfiddle.net/kjwxu/3/

Answer 4

Vous ne savez pas pourquoi vous rencontrez ce problème, mais une solution de contournement consiste à ajouter une classe afin de la styler.

CSS

#login label { display: block } 
#login label.hidden { display: none } 

JS

$('#login label').addClass('hidden').removeClass('hidden'); 

---

EDIT: Semble de notre discussion dans les commentaires, que commentant les importations de CSS supplémentaires résolu le problème.