fade фоновое изображение исчезает содержимое внутри этого div

Я пытаюсь выцветать фоновое изображение div, когда я изображение появляется содержимое внутри, что div также исчезает, что как остановить эффект выцветания содержимого.

JS Fiddle

HTML:

<div id="background">adsdsa</div>

JS:

var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p2.jpg"];
var i = 0;

// Start the slide show
var interval = self.setInterval(swapBkgnd, 5000)

function swapBkgnd() {
  if (i > (bgArr.length - 1)) {
    i = 0
   $('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });
  } else {
   $('#background')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': "url(" + bgArr[i] + ")"})
            .animate({opacity: 1});
    });
  }
  i++;
};

стиль CSS:

#background {
  position: absolute;
  min-height: 100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

1 ответ

  1. Если вы помещаете содержимое, внутри divкоторого исчезает, то вы не можете остановить выцветание содержимого. Если вы поместите содержимое снаружи divи выровнять его с помощьюposition: absolute;, то вы можете достичь своей цели желания. Посмотрите демо —

    var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p2.jpg"];
    var i = 0;
    
    // Start the slide show
    var interval = self.setInterval(swapBkgnd, 1000)
    
    function swapBkgnd() {
      if (i > (bgArr.length - 1)) {
        i = 0
        $('#background')
          .animate({
            opacity: 0
          }, 'slow', function() {
            $(this)
              .css({
                'background-image': "url(" + bgArr[i] + ")"
              })
              .animate({
                opacity: 1
              });
          });
      } else {
        $('#background')
          .animate({
            opacity: 0
          }, 'slow', function() {
            $(this)
              .css({
                'background-image': "url(" + bgArr[i] + ")"
              })
              .animate({
                opacity: 1
              });
          });
      }
      i++;
    };
    #background {
      position: absolute;
      min-height: 100%;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    span {
      position: absolute;
      top:0;
      left:0;
      z-index: 2;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="background"></div>
    <span>adsdsa</span>