JQuery непрозрачность не анимация

Question

Я создал следующую функцию, чтобы иметь 4 изображения (все в отдельных divs, чтобы иметь ссылки с ними), исчезают и выходят как своего рода галерея. Он работает, но когда пришло время для четкого изображения, и первое, чтобы отобразиться вместо этого, затухание не работает, оно просто меняет z-индекс и показывает первый. У кого-нибудь есть идея, почему это происходит?

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

Fixed это простое решение. Когда классы активны и последние активны, я удаляю только последний актив. Я удаляю активный до начала анимации.

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