Jquery: Hiding a div inside a hidden div with animation
<p>I am trying to hide a <code>&lt;div&gt;</code> which is inside another <code>&lt;div&gt;</code> that is hidden. I am using an animation: <code>$("#innerDiv").hide(400)</code>, but as long as the outer <code>&lt;div&gt;</code> is hidden the inner <code>&lt;div&gt;</code> doesn't get hidden and is later visible when I unhide the outer <code>&lt;div&gt;</code>. If the outer <code>&lt;div&gt;</code> is shown, the inner <code>&lt;div&gt;</code> gets hidden with an animation as expected. </p>

<p>I don't expect the inner <code>&lt;div&gt;</code> to hide with an animation when the outer <code>&lt;div&gt;</code> is hidden since that wouldn't make sense. I would however expect that the <code>&lt;div&gt;</code> would at least become hidden, which isn't the case. </p>

<p>I found that changing the javascript to <code>$("#innerDiv").hide()</code> fixes the problem, but removes the animation that I would like to be there for when the outer <code>&lt;div&gt;</code> is visible.</p>

<p><a href="http://jsfiddle.net/aBqce/1/" rel="nofollow">Here</a> is a jsFiddle demonstrating the problem. If you click the "Show" button first, then click the "Hide" button, the text disappears with an animation as I expect it to. However if you click the "Hide" button first, then click the "Show" button the text still appears. I expect it to be hidden (since I used the <code>.hide()</code> function.).</p>

<p>Why is this happening, and is there a way to keep the animation for when the outer <code>&lt;div&gt;</code> is visible, but make the <code>.hide(400)</code> actually hide the element when the outer <code>&lt;div&gt;</code> is hidden?</p>
