.hide() and .show() not caching properly CSS's display property

Note: I've found the causant of my problem. See below for more info.

I'll be concise. Here's my scenario:

The HTML file:

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

The CSS file:

#login label { display: block }

The JS file:

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

The desired behavior is to show the element again with the same CSS properties (display: block), but in the DOM it seems that the label element gets another (maybe the default?) ones (in this case, display: inline). Note: I've checked the HTML and CSS files. Everythi开发者_运维知识库ng is correct. The problem is in the javascript file.

Seen on jQuery's API docs, concerning .hide() method:

With no parameters, the .hide() method is the simplest way to hide an element:

$('.target').hide();

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Seen on jQuery's API docs, concerning .show() method:

With no parameters, the .show() method is the simplest way to display an element:

$('.target').show();

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Am I missing something? I'm wrong? Or is just a not desired behavior?

Thanks in advance.

Solution

Include the CSS first, then the JS later.

hide() and show() do not change the properties on an element's CSS class.

Put display:none as an inline style of anything you want hidden by default. Do not put it in the CSS class and everything will work fine.

Include the CSS first, then the JS later.

This works fine in FF3.6, IE8, Safari5, Chrome and OPERA10

Here is a demo http://www.jsfiddle.net/kjwxu/

Try this

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

Also of note if you dont like the flicker then you can remove "fast" and replace with 1 (meaning 1 millisecond)

Here is a demo http://www.jsfiddle.net/kjwxu/3/

Not sure why you're having this issue, but a workaround would be to add a class in order to style it.

CSS

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

JS

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

EDIT: Seems from our discussion in the comments, that commenting out the additional CSS imports fixed the issue.