淡出父级DIV-而不是子级 [英] Fade out parent DIV - but not the children

问题描述

我有这个HTML代码:

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

我要选择div #espacePub，而不要选择div #menu淡出，更改背景，然后淡入.使用 http://api.jquery.com/not/，我尝试过:

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

我的问题是整个#espacePub都在褪色，包括#menu，但是我不希望#menu褪色...我在做什么错了?

My problem is that the entire #espacePub is fading, including #menu but I don't want #menu fading... What I'm doing wrong?

推荐答案

给出#escapePub position: relative;
在#escapePub中用position: absolute; width: 100%; height: 100%;创建一个div #slider并将jquery应用于它.

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

这篇关于淡出父级DIV-而不是子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！