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;
使用#slider在#escapePub内创建div 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

当您更改父级不透明度时，不能将嵌套元素的不透明度保留为100％。可能您需要从#menu获取#espacePub div，并将其置于#espacePub以上。

Answer 3

问题是espacePub div包含菜单div所以当你淡出它时，里面的一切都必须被隐藏。要做你想做的事，他们需要是独立的元素。

这是一个快速fiddle，向您展示一个示例。注意我将图像更改为颜色，因此更容易在jsFiddle上设置。

淡出父母DIV - 但不是孩子

3 个答案: