fadeIn（）不能用作slideUp的回調函數

Question

我在具有不同動畫的頁面上有三個圖像。在點擊向下箭頭時，我希望帶有圖像的整個視口向上滑動，並且第四個圖像淡入視口。我已經使用jQuery來完成這些動畫，但第四圖片不衰落

這是鏈接到的網頁： 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()。