fadeIn（）はslideUpのコールバックとして機能しません

Question

私は異なるアニメーションのページに3つの画像を持っています。下向きの矢印をクリックすると、画像付きのビューポート全体が上にスライドし、4番目の画像がビューポートにフェードインします。私はこれらのアニメーションを達成するためにjQueryを使用していたが、第四画像がフェードインされていない

これは、Webページへのリンクです：事前に https://rimildeyjsr.github.io/St.Anthony-s-Website/

ありがとう！

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

問題がある：

slideUp()は親要素を隠します（.page-load-screen ）.page-one-picのあなたはコールバックでfadein()しようとしています。