Jquery: Hiding a div inside a hidden div with animation
===

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

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

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

[Here][1] 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 `.hide()` function.).

Why is this happening, and is there a way to keep the animation for when the outer `<div>` is visible, but make the `.hide(400)` actually hide the element when the outer `<div>` is hidden?


  [1]: http://jsfiddle.net/aBqce/1/