javascript - jQuery，动画仅适用于 1 张图像

Question

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    var header = $('#mainApp .screen .screen-img.screen-img3').addClass('animated fadeIn delay-0.5s');
var backgrounds = new Array(
    'url(images/img1.jpg)'
  , 'url(images/img2.jpg)'
  , 'url(images/img3.jpg)'
  , 'url(images/img4.jpg)'
  , 'url(images/img5.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])
</script>

脚本基本上每 5 秒更改一次背景，我正在使用 animate.css，如您所见 .addClass('animated fadeIn delay-0.5s')动画仅适用于第一张图片

Answer 1

我建议使用 animationend检测 CSS 动画结束的事件。

此事件可能需要 vendor 前缀，如下所示。

var backgrounds = new Array(
  'url(https://picsum.photos/200/300?image=0)',
  'url(https://picsum.photos/200/300?image=10)',
  'url(https://picsum.photos/200/300?image=100)',
  'url(https://picsum.photos/200/300?image=500)',
  'url(https://picsum.photos/200/300?image=1000)'
);

var current = 0;
var delay = 2000;

var header = $('#mainApp .screen .screen-img.screen-img3');

header
  .addClass('animated fadeIn delay-0.5s');

function nextBackground() {

  header
    .one('webkitAnimationEnd mozanimationend animationend oAnimationEnd', function() {
      header
        .css('background-image', backgrounds[current])
        .one('webkitAnimationEnd mozanimationend animationend oAnimationEnd', function() {
          current = (current + 1) % backgrounds.length;
          setTimeout(nextBackground, delay);
        })
        .toggleClass('fadeIn fadeOut');
    })
    .toggleClass('fadeIn fadeOut');

}

nextBackground();

body {
  margin: 0;
}

.screen-img {
  height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mainApp">
  <div class="screen">
    <div class="screen-img screen-img3"></div>
  </div>
</div>