子divs消失，因为父div的背景使用JQuery更改

Question

问题是，当动画改变div noob背景时，其他div会运行其中的消失，然后重新出现。我想让div noob内的div保持在他们的位置，但只有div noob改变的背景。我怎样才能做到这一点。

我有以下代码：

var currentBackground = 0; 
 
var backgrounds = []; 
 
backgrounds[0] = 'img/m1.jpg'; 
 
backgrounds[1] = 'img/m2.jpg'; 
 
backgrounds[2] = 'img/m3.jpg'; 
 
backgrounds[3] = 'img/m4.jpg'; 
 
backgrounds[4] = 'img/m5.jpg'; 
 

 
function changeBackground() { 
 
    currentBackground++; 
 
    if (currentBackground > 4) currentBackground = 0; 
 
    $('#noob').fadeOut(1500, function() { 
 
    $('#noob').css({ 
 
     'background-image': "url('" + backgrounds[currentBackground] + "')" 
 
    }); 
 
    $('#noob').fadeIn(1500); 
 
    }); 
 
    setTimeout(changeBackground, 5000); 
 
} 
 
$(document).ready(function() { 
 
    setTimeout(changeBackground, 5000); 
 
}); 
 
changeBackground();

.m_i { 
 
    float: left; 
 
    background-color: cyan; 
 
    width: 1366px; 
 
    height: 488px; 
 
    /*background-image: url(..//img/m1.jpg);*/ 
 
} 
 

 
#hol { 
 
    width: 600px; 
 
    height: 90px; 
 
    margin-left: 383px; 
 
    margin-top: 194px; 
 
} 
 

 
.nam { 
 
    width: 600px; 
 
    height: 40px; 
 
    background-image: url(..//img/new.png); 
 
    float: left; 
 
} 
 

 
.but { 
 
    margin-top: 10px; 
 
    width: 600px; 
 
    height: 40px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="m_i" id="noob"> 
 
    <div id="hol"> 
 
    <div class="nam"> 
 
    </div> 
 
    <div class="but"> 
 
     <button id="bb">W E &nbsp &nbsp A R E &nbsp &nbsp C O R E X</button> 
 
    </div> 
 
    </div> 
 
    <div id="dd" class="local-scroll"> 
 
    <a href="#yy" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i></a> 
 
    </div> 
 
</div>

Answer 1

既然你是淡入淡出整个包装，一切都消失，再次出现。如果要使用淡入淡出效果，则需要分离出背景和前景。

这里是你的代码

HTML（添加noob_bg和noob_fg包装的背景和内容的修改

<div class="m_i" id="noob"> 
    <div id="noob_bg"></div> 
    <div id="noob_fg"> 
     <div id="hol"> 
     <div class="nam"> 
     </div> 
     <div class="but"> 
      <button id="bb">W E &nbsp &nbsp A R E &nbsp &nbsp C O R E X</button> 
     </div> 
     </div> 
     <div id="dd" class="local-scroll"> 
     <a href="#yy" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i></a> 
     </div> 
    </div> 
</div> 

CSS

#noob { 
    position: relative; 
} 
#noob_bg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
#noob_fg { 
    position: relative; 
    z-index: 2; 
} 
.m_i { 
    float: left; 
    width: 1366px; 
    height: 488px; 
    /*background-image: url(..//img/m1.jpg);*/ 
} 

#hol { 
    width: 600px; 
    height: 90px; 
    margin-left: 383px; 
    margin-top: 194px; 
} 

.nam { 
    width: 600px; 
    height: 40px; 
    background-image: url(..//img/new.png); 
    float: left; 
} 

.but { 
    margin-top: 10px; 
    width: 600px; 
    height: 40px; 
    float: left; 
} 

JS： （只修改noob_bg）。

注意我已经改变了CSS样式。因此。 另外我建议你为每种风格使用CSS类，并在每次超时后更改类名。其次，不要在函数本身内部使用超时。而是使用setInterval。

var currentBackground = 0; 
var backgrounds = []; 
backgrounds[0] = 'red'; 
backgrounds[1] = 'blue'; 
backgrounds[2] = 'green'; 
backgrounds[3] = 'yellow'; 
backgrounds[4] = 'orange'; 

function changeBackground() { 
    currentBackground++; 
    if (currentBackground > 4) currentBackground = 0; 
    $('#noob_bg').fadeOut(1500, function() { 
    $('#noob_bg').css({ 
     'background-color': backgrounds[currentBackground] 
    }); 
    $('#noob_bg').fadeIn(1500); 
    }); 
    setTimeout(changeBackground, 5000); 
} 
$(document).ready(function() { 
    setTimeout(changeBackground, 5000); 
}); 
changeBackground();