javascript - jQuery 在点击时显示下一张图片不适用于 .first

Question

我试图让下一张图片淡出 toggleImg() 是从 onClick 调用的，但是当我们到达列表的末尾并且我再次从头开始时淡入淡出效果不起作用。

我假设它与 HTML 在 dom 中的加载方式有关，并且最后一个图像标记具有更高的优先级(因为它在 dom 的下方)。

你知道为什么当我们到达列表底部并重新从头开始时淡入淡出效果不起作用吗？

$('.next').click( function() {
  toggleImg();
});

function toggleImg() {
  //Setup vars
  var current = $('ul#feature-image li.current');
  var next = current.next();

  //tag this guy to be deleted later
  current.addClass('old');

  //check if were at the end of the list
  if (next.length != 1) {
    current = $('ul#feature-image li').first();
    current.addClass('current imgFadeIn');
  } else {
    current.next().addClass('current imgFadeIn');
  }

  //delete the last guy now the animation is complete
  setTimeout(function() {
    $('ul#feature-image li.old').removeClass('current old imgFadeIn');
  }, 700);
}

.next{
  position:absolute;
  top: 0;
  left: 0;
  background: pink;
  padding: 10px 20px;
  z-index: 9999;
}

.imgFadeIn {
  animation-name: imgFadeIn;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
}

@keyframes imgFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ul#feature-image {
  padding: 0px 0px;
  margin: 0px 0px;
}

ul#feature-image li {
  width: 100%;
  height: auto;
  min-height: 700px;
  display: none;
  position: absolute;
}

ul#feature-image li img {
  width: 100%;
  height: auto;
  min-height: 100%;
  z-index: 0;
  position: absolute;
}

ul#feature-image li.current {
  z-index: 99;
  display: block;
}

ul#feature-image li.current img {
  z-index: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="feature-image">
   <li class="current"><img src="http://via.placeholder.com/350x200" alt="img"></li>
   <li><img src="http://via.placeholder.com/300x230" alt="img"></li>
   <li><img src="http://via.placeholder.com/320x100" alt="img"></li>
   <li><img src="http://via.placeholder.com/400x250" alt="img"></li>
</ul>

<div class="next">next</div>

根据要求 JSFiddle - https://jsfiddle.net/Lm99d6f0/1/ * 注意淡入淡出，直到最后一个列表项

Answer 1

您需要将 z-index 添加到 .old 元素。

ul#feature-image li.old {
    z-index: 98;
}

https://jsfiddle.net/Lm99d6f0/2/