Исчезать родительский 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 исчезает, включая # меню, но я не хочу, чтобы исчезло # меню ... Что я делаю не так?

Answer 1

дают #escapePub position: relative;Создайте div #slider внутри #escapePub с помощью position: absolute; width: 100%; height: 100%; и примените к нему jquery.

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

Answer 2

Проблема в том, что div espacePub содержит div меню, поэтому при его исчезновении все внутри должно быть скрыто. Чтобы делать то, что вы хотите, они должны быть отдельными элементами.

Вот быстрая скрипка , показывающая пример. Обратите внимание, что я изменил изображения на цвета, чтобы их было проще настроить на jsFiddle.

Answer 3

Вы не можете оставить вложенный элемент с непрозрачностью 100%, когда измените его родительскую непрозрачность. Возможно, вам нужно получить #menu div из #espacePub и поместить его в абсолютное значение над #espacePub.