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>
            <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?

回答1:

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

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/7529371/fade-out-parent-div-but-not-the-children

标签

jquery

jquery-selectors