Opacité JQuery non animée

Question

J'ai créé la fonction suivante pour avoir 4 images (toutes div séparées pour avoir des liens avec elles) s'affichent et disparaissent comme une sorte de galerie. Cela fonctionne, mais quand il est temps que la quatrième image disparaisse et que la première apparaisse à la place, l'évanouissement ne fonctionne pas, il change juste l'index z et le premier est affiché. Quelqu'un a une idée de pourquoi cela se passe?

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

fixe ce avec une solution simple. Lorsque les classes actives et last-actives sont supprimées, je n'ai supprimé que last-active. J'ai retiré actif avant que l'animation ait lieu.

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