fadeIn() funktioniert nicht als Callback für SlideUp

Question

Ich habe drei Bilder auf einer Seite mit verschiedenen Animationen. Wenn ich auf den Abwärtspfeil klicke, möchte ich, dass das gesamte Ansichtsfenster mit Bildern nach oben und ein viertes Bild in das Ansichtsfenster eingeblendet wird. Ich habe jQuery verwendet, um diese Animationen zu erreichen, aber das vierte Bild schwindet nicht in

Dies ist der Link zur Webseite:. https://rimildeyjsr.github.io/St.Anthony-s-Website/

Vielen Dank im Voraus!

html:

<section class="page-load-screen"> 
      <img src="images/logo-color-raster-500x500.png" alt="school logo" class="img-responsive school-logo animated flipInY"> 
      <img src="images/landing-page-blurred.jpg" alt="blurred image of the school" class="img-responsive blurred-school-pic"> 
      <img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive animated slideInDown down-arrow"> 
      <img src="images/page-1-hero-image.jpg" alt="school's image" class="img-responsive page-one-pic"> 
     </section> 

CSS:

.pageloadscreen { 
    position: relative; 
    left: 0; 
    top: 0; 
} 

.blurred-school-pic { 
    display: none; 
    position: relative; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

.school-logo { 
    display: none; 
    height: 350px; 
    width: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 10%; 
    z-index: 5; 
    margin: 0 auto; 
} 


.down-arrow { 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    top: 80%; 
    z-index: 5; 
} 

.page-one-pic { 
    display: none; 
} 

Javascript:

$(document).ready(function(){ 
       $(".school-logo").fadeIn(1000); 
       $(".blurred-school-pic").delay(500).fadeIn(2000); 
       $(".down-arrow").delay(1500).fadeIn(500); 
       $(".down-arrow").click(function() { 
        $(".school-logo").fadeOut(1500); 
        $(".page-load-screen").slideUp(3000,function(){ 
         $(".page-one-pic").fadeIn(); 
        }); 
       }); 
      }); 

Answer 1

Problem ist:

slideUp() verbirgt das übergeordnete Element (.page-load-screen) von .page-one-pic versuchen Sie fadein() beim Rückruf.