Question

我有以下HTML布局：

<html>
    <head>
        ...
    </head>
    <body>
        <header class="fluid-container">
            <div class="nav-wrapper">
                ...
            </div>
        </header>
        <section class="salutation fluid-container">
            <div class="intro-wrapper">
                ...
            </div>
        </section>
    </body>
</html>

我的目标是每当我的窗口滚动超过60px时隐藏intro-wrapper，反之亦然。因此，我实现了以下Jquery代码来实现上述目标。

var checkScroll = true;

$(window).scroll(function() {

    if($(this).scrollTop() > 60 && checkScroll) {
        $(".intro-wrapper").stop().animate({display:'none'}, 400);
        checkScroll = false;
        console.log('Scrolling down. \t checkScroll: ' + checkScroll);
    } 

    else if($(this).scrollTop() < 60 && !checkScroll) {
        $(".intro-wrapper").stop().animate({display:'block'}, 400);
        checkScroll = true;
        console.log('Scrolling up. \t\t checkScroll: ' + checkScroll);
    }
});

但遗憾的是，我一直未能理解为什么动画没有发生。请在上面的代码中指出错误并帮助我找出解决方案。

请注意console.log()正如预期的那样呈现结果，即条件得到适当满足并且循环正在适当地完成其旅程。

Answer 1

您可以使用jquery .fadeIn（）。fadeOut（）方法显示或隐藏延迟元素，而不是在此处设置动画。

显示属性在jQuery动画中不起作用。请参阅animate

Answer 2

display将/不适用于animate。除了其他答案之外，您还可以使用show()和hide()。

来自http://api.jquery.com/animate/：

注意：与.slideDown（）和.fadeIn（）等速记动画方法不同，.animate（）方法不会使隐藏元素作为效果的一部分可见。例如，给定$（“someElement”）。hide（）。animate（{height：“20px”}，500），动画将运行，但元素将保持隐藏状态。

Answer 3

显示为无/块无法设置动画。请尝试使用overflow：hidden

将高度设置为0

或者你可以轻松地使用css过渡：

// hide it
$(".intro-wrapper").addClass('hidescroll');
// show it again
$(".intro-wrapper").removeClass('hidescroll');

然后在css：

.intro-wrapper {
    transition: height .5s ease-in;
    height: 400px;
}

.intro-wrapper.hidescroll {
    height: 0;
    overflow: hidden;
}

为什么Jquery animate（）在我的情况下不起作用？

3 个答案: