Fade out on the mother div but not on your kids with jQuery

Question

I have this code, but I’d like the #navBar suffer the fadeOut, #menuBt and #hi were always visible, it is possible?

HTML:

<div id="navBar">
    <div id="hi"></div>
    <div id="menuBt"><h3>menu</h3></div>
</div>

jQuery:

$('#navBar').stop().fadeOut(500);

Answer 1

The only way to do this is by removing the internal nodes from the navBar from within the navBar. One way is to add them after the navBar when the animation is over:

$('#navBar').stop().fadeOut(500,function(){
  $(this).after($(this).children());
});