jQuery在單擊時顯示下一張圖片不適用於.first

Question

我試圖淡入視圖，從onClick調用下一個圖像toggleImg() ，但是當我們到達列表的末尾並且從頭開始時，淡入淡出效果不起作用。

我認為這與將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/