hide() and show() behave strangely for elements with 'float:left'

[anonymous]

Sample page with the behavior:  http://jsfiddle.net/zee2G/1/

Steps to reproduce:

1. Click the "Show" link. the content span with text "Sample Text" will appear below the links with a 'display:inline' styling.
2. Click the "Hide" link. The expected behavior is that the content span will change to 'display:none'. The actual behavior is that nothing happens.
3. Click the "Show" link again. The expected behavior is that, since the content span is already visible, nothing will happen. The actual behavior is that the content span's styling changes from 'display:inline' to 'display:inline-block'. The content's text will be split into two lines.
4. Click the "Hide" link again. The content span will change to 'display:none', as expected.
5. Return to step 1. Repeat until satisfied.

This behavior does not occur if you remove the 'float:left' styling from the subContent class.

The behavior occurs using jQuery versions:
1.7
1.6.2
1.5.2

The behavior is different using jQuery 1.4.4. Steps 1-3 have the same behavior as higher numbered versions. However, once the content changes to 'display:inline-block', the show and hide buttons work as expected - the content will alternate between 'none' and 'inline-block', and it is impossible to return to 'inline'.

The behavior is not reproducible in 1.3.2 or 1.2.6 - the content will alternate between 'none' and 'inline', which is the expected behavior.

Among the DTDs allowed by jsFiddle, the behavior will appear with:
XHTML 1.0 Transitional
HTML 4.01 Transitional
HTML 4.01 Frameset

The behavior will not appear for any other DTD allowed by jsFiddle.
The behavior will appear in Firefox if no doctype is specified, although I can't demonstrate that with jsFiddle.

The behavior is reproducible in browsers:
Firefox 3.6.20 (with safe mode enabled, and without safe mode enabled)
Internet Explorer 8.0.6001.18702, Browser Mode IE8, Document Mode IE8 Standards

The behavior is NOT reproducible in browsers:
Internet Explorer 8, Browser Mode IE7
Internet Explorer 8, Browser Mode IE8, Document Mode IE7 Standards
Internet Explorer 8, Browser Mode IE8, Document Mode Quirks

Operating System:
Microsoft Windows XP Professionsal
Version 2002
Service Pack 3

(Note: I have not tested all possible combinations of Browser, DTD, and jquery versions. My standard operating environment was jQuery 1.7, HTML 4.01 Transitional, Firefox 3.6.20, and I varied a single one of them while keeping the rest constant. For example, when testing different jQuery versions, I only used HTML 4.01 Transitional and Firefox. When testing different DTDs, I only used jQuery 1.7 and Firefox. etc etc.)

[rwaldron]

I'm not sure where the actual issue was, possibly the leaking "content" var... who knows.

This works fine:  http://jsfiddle.net/rwaldron/zee2G/2/

[anonymous]

Replying to rwaldron:

I'm not sure where the actual issue was, possibly the leaking "content" var... who knows.

This works fine:  http://jsfiddle.net/rwaldron/zee2G/2/

Thanks for investigating my bug report.
I've revised your jsFiddle so that it shows the unusual behavior again:
 http://jsfiddle.net/zee2G/5/
It appears that the behavior only occurs if you pass a duration argument to show() or hide().

[rwaldron]

The issue is that your outer container starts with no explicit width and the inner container is 50% of that unknown width. When calling hide(duration) or show(duration) (vs calling without a duration argument) the behaviour is changed from simple style.display setting to actually animating the width, height and opacity. When you hide the outer container, the current width is saved and since the outer container is now animated "open" and restored to the width that was saved when it was closed, the inner container is now 50% of that width.