The element loses the original CSS property "display" between hide and show

[bfaria]

When you call jQuery's hide method, it seems that it stores the original CSS "display" property of the element somewhere. At this time, jQuery set the property "display" to "none" in the "style" attribute of the target element. Then, when you call show method, it gets the stored CSS "display" property from somewhere and puts it back inside the "style" attribute.

The problem is when a class is added to the target element and this class changes its "display" CSS property. As the hide and show methods change the "display" property inside the style attribute of the element, it overrides all the CSS declarations and can cause some unexpected behaviors for the element or its children.

This problem also happens with the methods fadeOut, fadeIn, slideUp and slideDown.

Here is a jsfiddle with some examples of the problem mentioned: ​http://jsfiddle.net/bfaria/vVZAe/2/

Thank you.

[timmywil]

This is valid, but I'm not sure how to fix it.

[dmethvin]

I think developers should choose between using classes (possibly augmented with CSS animations/transitions) or using jQuery animations. Mixing the two will cause these kind of problems and we can't untangle the resulting mess.