JQuery 不透明度不是动画

Question

我创建了以下函数来让 4 个图像（全部在单独的 div 中以与它们有链接）作为一种画廊淡入淡出。它有效，但是当第四张图像淡出并且第一张图像出现时，淡入淡出不起作用，它只是更改 z-index 并显示第一张。有人知道为什么会这样吗？

$(function() {
  setInterval("Fader()", 5000);
});

function Fader() {
  var $active = $('#slider DIV.active');
  var $next;
  if ($active.length == 0) $active = ('#slider DIV:last');

  if ($active.next().length == 0) {
    $next = $('#slider DIV:first');
  } else {
    $next = $active.next()
  }

  $active.addClass('last-active');

  $next.css({
      opacity: 0.0
    })
    .addClass('active')
    .animate({
      opacity: 1.0
    }, 1000, function() {
      $active.removeClass('active last-active');
    });
}

#fp1img,#fp2img,#fp3img,#fp4img {
  z-index: 8;
}
#fp1img.last-active,#fp2img.last-active,#fp3img.last-active,#fp4img.last-active {
  z-index: 9;
}
#fp1img.active,#fp2img.active,#fp3img.active,#fp4img.active {
  z-index: 10;
}

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

<div id='slider'>
  <div class="fpImgCrop active" id="fp1img">
    <a id='fp1link' href="">1</a>
  </div>
  <div class="fpImgCrop" id="fp2img">
    <a id='fp2link' href="">2</a>
  </div>
  <div class="fpImgCrop" id="fp3img">
    <a id='fp3link' href="">3</a>
  </div>
  <div class="fpImgCrop" id="fp4img">
    <a id='fp4link' href="">4</a>
  </div>
</div>

Answer 1

使用简单的解决方案解决了这个问题。类 active 和 last-active 被移除的地方，我只移除了 last-active。我在动画发生之前删除了活动。

$active.addClass('last-active'); 
$active.removeClass('active'); 
$next.css({opacity:0.0}) 
.addClass('active') 
.animate({opacity:1.0},1000,function(){ 
$active.removeClass(' last-active'); });

JQuery 不透明度不是动画

JQuery opacity not animating

jquery

opacity

fade