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()）。

fadeIn（）不能用作slideUp的回调

1 个答案: