Child divs disappear as the background of parent div is changed using JQuery

Question

The problem is that when the animation to change background of the div noob runs the others divs inside it disappear and then reappear. I want the divs inside the div noob to stay in their position but only the background of div noob change. How can i achieve this.

I have the following code:

 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">WE &nbsp &nbsp ARE &nbsp &nbsp CORE 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

Since you are fading in and out the entire wrapper, everything is disappearing and appearing again. You need to separate out the background and foreground if you want to use the fade effect.

Here's a modification to your code

HTML (added noob_bg and noob_fg wrappers for background and content.

<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 : (only modify noob_bg).

Note I have changed the css styles. please change accordingly. Also I suggest you use CSS classes for each style and change the class name after each timeout. Secondly, don't use timeout inside the function itself. Rather use 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();