Rimil Dey Rimil Dey - 4 months ago 12
jQuery Question

fadeIn() not working as callback for slideUp

I have three images on a page with different animations. On clicking the down arrow, I want the entire viewport with images to slide up and a fourth image fade into the viewport. I have used jQuery to accomplish these animations, but the fourth picture is not fading in.

This is the link to the webpage:
https://rimildeyjsr.github.io/St.Anthony-s-Website/

Thanks in advance!

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

Problem is :

slideUp() hides the parent element (.page-load-screen) of .page-one-pic you are trying to fadein() on callback.