Question

我试图淡入查看下一个图像toggleImg()是从onClick调用的，但是当我们到达列表的末尾并且我从头开始时，淡入淡出效果并没有＃39}工作。

我认为它与在dom中加载HTML的方式有关，而且最后一个图像标记具有更高的优先级（因为它在dom的下方）。

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

＆＃13;

$('.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);
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

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

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

1 个答案: