Создание двух jquery-анимаций работает один за другим

Question

Я использую функцию обратного вызова для выполнения анимации fadeIn после слайд-эффекта. Анимацию можно увидеть здесь, нажав на стрелку вниз: https://rimildeyjsr.github.io/St.Anthony-Website/

Между двумя анимациями появляется белый фон, который, как я подозреваю, обусловлен задержкой между анимацией. Как исправить анимацию так, что, как только слайд-экран закончится, fadeIn начнет работать, а белый фон избегается.

JQuery:

$(".down-arrow").click(function() { 
    $(".school-logo").fadeOut(200); 
    $(".page-load-screen").slideUp(1000,"easeInOutBack",function(){ 
     $(".page-one-pic").fadeIn(500); 
     $(".school-name").delay(500).fadeIn(500); 
     $(".down-arrow-page-one").delay(1500).fadeIn().one(animationEnd, function(){ 
       carousel(); 
      }); 
     }); 
    }); 

Ссылка на GitHub хранилище: https://github.com/rimildeyjsr/St.Anthony-Website

Answer 1

Меняйте FadeIn

$(".page-one-pic").fadeIn(500); 

в

$(".page-one-pic").css({opacity: 0.05}).animate({opacity: 1},500); 

Answer 2

хотя у вас нет никакого кода SNI ppet или jsfiddle РМКО показывая что-то подобное, как вы хотите, надеюсь, это поможет вам

$(document).ready(function(){ 
 
setInterval('animateImages()', 4000); 
 
}) 
 
function animateImages(){ 
 
    var $active = $('#fade .active'); 
 
    var $next = ($active.next().length > 0) ? $active.next() : $('#fade img:first'); 
 
    $next.css('z-index',2); 
 
    $active.fadeOut(1000,function(){ 
 
\t $active.css('z-index',1).show().removeClass('active'); 
 
    $next.css('z-index',3).addClass('active'); 
 
     }); 
 
    }

#fade{position:relative;} 
 
#fade img{position:absolute;z-index:1} 
 
#fade img.active{z-index:3}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fade"> 
 
<img class="active" src="https://prod-filesbucket-7hmmorphht20.s3-ap-southeast-2.amazonaws.com/legacyfiles-smooth/sleepy20face.jpg" alt="My image" /> 
 
<img src="http://emojidictionary.emojifoundation.com/img/emoji50.jpg" alt="My image" /> \t 
 
</div>

** NB: Но убедитесь, что ваш образ такого же размера в противном случае FADEOUT один перекроет FadeIn один