jQuery fadeOut bug

fadeOut does not behave like .hide() on a hidden element http://bugs.jquery.com/ticket/9310#comment:10

HTML

<p>fadeOut() does not set an element to display:none if a parent is already hidden.  Click the buttons in order to see the bug:</p>

<button onclick="outside.hide()">outside.hide</button>
<button onclick="inside.fadeOut()" style="color:red">inside.fadeOut</button>
<button onclick="outside.show()">outside.show</button>
<button onclick="inside.fadeIn()">inside.fadeIn</button>

<p>so in order to make sure fadeOut() hides an element, you have to call hide() on it manually:</p>

<button onclick="outside.hide()">outside.hide</button>
<button onclick="inside.fadeOut(function(){$(this).hide()})">fadeOut w/ hide workaround</button>
<button onclick="outside.show()">outside.show</button>
<button onclick="inside.fadeIn()">inside.fadeIn</button>

<p>This behavior also exists with slideUp():</p>

<button onclick="outside.hide()">outside.hide</button>
<button onclick="inside.slideUp()" style="color:red">inside.slideUp</button>
<button onclick="outside.show()">outside.show</button>
<button onclick="inside.slideDown()">inside.slideDown</button>

<p>but it is inconsistent with the way .fadeIn() works even when an element is hidden:</p>

<button onclick="inside.hide()">inside.hide</button>
<button onclick="outside.hide()">outside.hide</button>
<button onclick="inside.fadeIn()">inside.fadeIn</button>
<button onclick="outside.show()">outside.show</button>


    
<div id="outside"><h2>outside</h2>
   outside div
   <div id="inside"><h3>inside</h3>
       inside div
   </div>
</div>

CSS

div {
 border: 1px solid black;
 margin: 20px;
 padding: 20px;
}

JavaScript

outside = $('#outside'); inside = $('#inside');

//the bug is demonstrated here as well
outside.hide();
inside.fadeOut(1000, function(){
   outside.show();
});