Jquery 淡入淡出

Question

我有以下代码：

代码：

$(document).ready(function(){
var header = $('body');

var backgrounds = new Array(
'url(/1.jpg)'
, 'url(/2.jpg)'
, 'url(/1.jpg)'

);

var current = 0;

function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);

header.css('background-image', backgrounds[0]);
});

我可以在上面的代码中添加什么，以便背景图像之间有 "smooth" 过渡。我不想使用插件。

谢谢 :)

Answer 1

您可以淡出、更改背景并淡入：

function nextBackground() {
  current++;
  current = current % backgrounds.length;
  header.fadeOut(200, function(){
    header.css('background-image', backgrounds[current]);
    header.fadeIn(200);
  })
}

Answer 2

如果您想交叉淡入淡出幻灯片，您可以将图像的副本放在上面，并随着下一张幻灯片在下面的变化而淡出。

$(document).ready(function(){
  var image = $('.wrap');
  var fader = $('.fader');

  var backgrounds = new Array(
    'url(http://placehold.it/480&text=Slide+1)'
    ,'url(http://placehold.it/480&text=Slide+2)'
    ,'url(http://placehold.it/480&text=Slide+3)'
  );

  var current = 0;
  function nextBackground() {
    // Change the background image while
    // creating a duplicate of image and 
    // fade it out
    fader.css('background-image', backgrounds[current]).fadeOut(function() {
      fader.css('background-image', '').show();
    });
    
    current++;
    current = current % backgrounds.length;
    
    image.css('background-image', backgrounds[current]);
  }
  setInterval(nextBackground, 2000);

  image.css('background-image', backgrounds[0]);
});

.wrap, .fader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="fader"></div>
</div>

Jquery 淡入淡出

Jquery Fade in Fade out

javascript

jquery

fadeout

fadein