Fade out parent DIV - but not the children

I have this HTML code :

<div id="espacePub">        

    <div id="menu">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
            <开发者_StackOverflow社区li>Link 6</li>
        </ul>
    </div><!-- End Div menu -->

</div><!-- End Div espacePub -->

I want to select the div #espacePub but not the div #menu to fade out, change background and then fade in. With documentation found on http://api.jquery.com/not/, I tried this :

var imgs = [            
'img/pub.jpg',
'img/pub2.jpg',
'img/pub3.jpg'];
var cnt = imgs.length;

$(function() {
    setInterval(Slider, 2000);
});

function Slider() {
    $('#espacePub').not(document.getElementById('menu')).fadeOut("slow", function() {
   $(this).css('background-image', 'url("'+imgs[(imgs.length++) % cnt]+'")').fadeIn("slow");
});
}

My problem is that the entire #espacePub is fading, including #menu but I don't want #menu fading... What I'm doing wrong?

give the #escapePub position: relative;
Create a div #slider inside the #escapePub with position: absolute; width: 100%; height: 100%; and apply jquery to it.

$('#espacePub #slider').fadeOut("slow",
    function() {
        $(this).css('background-image', 'url("'+imgs[(imgs.length++) % cnt]+'")')
               .fadeIn("slow");
    });

You can't leave the nested element with the opacity 100% when you change it's parent opacity. Probably you need get #menu div from the #espacePub and position it absolute over #espacePub.

The problem is the espacePub div contains the menu div so when you fade it everything inside has to be hidden. To do what you want they will need to be separate elements.

Here is a quick fiddle showing you an example. Note I changed the images to colors so it was easier to set up on jsFiddle.