jquery - 淡出父级 DIV - 但不淡出子级

Question

我有这个 HTML 代码:

<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>
            <li>Link 6</li>
        </ul>
    </div><!-- End Div menu -->

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

我想选择 div #espacePub，但不选择 div #menu 来淡出、更改背景，然后淡入。文档位于 http://api.jquery.com/not/ ，我尝试过这个:

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");
});
}

我的问题是整个#espacePub 正在消失，包括#menu，但我不希望#menu 消失...我做错了什么？

Answer 1

给出#escapePub position:relative;
使用 position:absolute; 在 #escapePub 内创建一个 div #slider宽度:100%； height: 100%; 并对其应用jquery。

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