淡出父 DIV - 但不是子 DIV答案

【问题标题】：Fade out parent DIV - but not the children淡出父 DIV - 但不是子 DIV
【发布时间】：2013-04-24 19:22:50
【问题描述】：

我有这个 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 褪色...我做错了什么？

【问题讨论】：

只要menu 在espacePub 内，它也会消失。 fadeOut 获取匹配的全部内容。您需要将其从espacePub div 中取出。
对了，你可以用#menu代替document.getElementById('menu')

标签： jquery jquery-selectors

【解决方案1】：

给#escapePubposition: relative;
使用position: absolute; width: 100%; height: 100%; 在#escapePub 内创建一个div #slider 并将jquery 应用于它。

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

【讨论】：

我认为你的意思是位置：相对，不是吗？

【解决方案2】：

当您更改其父不透明度时，您不能将不透明度保持为 100% 的嵌套元素。可能您需要从#espacePub 获取#menu div 并将其绝对定位在#espacePub 之上。

【讨论】：

【解决方案3】：

问题是 espacePub div 包含菜单 div，所以当你淡化它时，里面的所有东西都必须隐藏。为了做你想做的事，它们需要是单独的元素。

这是一个快速的fiddle 向您展示示例。请注意，我将图像更改为颜色，以便在 jsFiddle 上进行设置。

【讨论】：