淡出父母DIV – 但不是孩子

我有这个HTML代码：

 
 
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
Link 5
 
Link 6
 
 
 
 

我想选择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;
在#escapePub创建一个div #slider ，其position: absolute; width: 100%; height: 100%; 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％。 可能你需要从#espacePub获取#espacePub div并将其绝对放在#espacePub 。

Answer 3

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

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