Question

我在开头创建了一个带有启动页面的网站，然后我想在屏幕上方向上滑动，并在按下箭头时消失。我试图在Jquery中使用动画来做到这一点。我为您创建了一个Fiddle来检查代码。

HTML

        <div class='sc'>
        <div class='welcome'>
            <h1>Welcome to Brownsover Walkers</h1>
        </div>

        <div class='intro'>
            <p>#1 dog walkers in the Brownsover area</p>
        </div>

JS

var load = function(){
    $('.welcome').hide().fadeIn(2000);
    $('.intro').delay(1300).hide().fadeIn(2000);
    $('.arrow').delay(3000).hide().fadeIn(2000);
}

var unveil = function(){
    $('.arrow').click(function(){
        $('.sc').animate({
            bottom: '5000px'
        }, 500);
    });
}

$(document).ready(load,unveil);

CSS

html { 
  background: url(http://www.brwalkers.esy.es/images/bg3.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.sc{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e3e3e3;
    -webkit-box-shadow: 2px 6px 16px 1px rgba(0,0,0,0.61);
    -moz-box-shadow: 2px 6px 16px 1px rgba(0,0,0,0.61);
    box-shadow: 2px 6px 16px 1px rgba(0,0,0,0.61);
}

.sc h1{
    position: absolute;
    text-align: center;
    font-size: 70px; 
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    top: 30%;
    bottom: 0;
    left: 0;
    right: 0;
}

.sc p{
    position: absolute;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    font-size: 25px;
    top: 45%;
    bottom: 0;
    left: 0;
    right: 0;
}

.arrow{
    position: relative;
}

#arrow1{
    cursor: pointer;
    position: absolute;
    margin: auto;
    margin-top: 45%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 1

我在你的代码中发现了一些错误。

您正在将多个处理程序传递给.ready()。你只能传递一个。
致电.animate()上的html和body而不是
如果您想要转到页面顶部，请.animate()设置scrollTop

Here is the updated JSFiddle

向上滑动整页

1 个答案: