Question

我创建了以下函数来拥有4个图像（所有图像都在不同的div中与它们链接）淡入淡出作为一种图库。它可以工作，但是当第四个图像淡出而第一个显示的时候，衰落不起作用，它只是改变z-index并显示第一个。任何人都知道为什么会这样？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

通过简单的解决方案解决了这个问题。在删除活动类和最后活动类的情况下，我只删除了最后一个活动。在动画发生之前我删除了活动状态。

$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不透明度没有动画

1 个答案: