Javascript 为什么Jquery animate（）在我的例子中不起作用？_Javascript_Jquery_Html_Css_Jquery Animate

Javascript 为什么Jquery animate（）在我的例子中不起作用？

javascript jquery html css

Javascript 为什么Jquery animate（）在我的例子中不起作用？,javascript,jquery,html,css,jquery-animate,Javascript,Jquery,Html,Css,Jquery Animate,我有以下HTML布局： <html> <head> ... </head> <body> <header class="fluid-container"> <div class="nav-wrapper"> ... </div> </header>

我有以下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时隐藏简介包装器，反之亦然。因此，我实现了以下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);
    }
});

var checkScroll=true；
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>60&&checkScroll）{
$（“.intro wrapper”）.stop（）.animate（{display:'none'}，400）；
checkScroll=false；
log（'向下滚动。\t checkScroll:'+checkScroll'）；
} 
else if（$（this）.scrollTop（）<60&&！checkScroll）{
$（“.intro wrapper”）.stop（）.animate（{display:'block'}，400）；
checkScroll=true；
console.log（'向上滚动。\t\t checkScroll:'+checkScroll）；
}
});

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

请注意，

console.log（）

显示的结果与预期一样，即条件得到了适当的满足，循环也适当地完成了它的旅程。

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

显示属性在jQuery动画中不起作用。

请参阅此处的“动画”部分，您可以使用jquery.fadeIn（）.fadeOut（）方法延迟显示或隐藏元素

显示属性在jQuery动画中不起作用。

请参阅

显示

将/不使用

动画

。除了其他答案外，您还可以使用

show（）

和

hide（）

发件人：

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

显示将/不与动画一起工作。除了其他答案外，您还可以使用show（）
和hide（）

发件人：
注意：与.slideDown（）和.fadeIn（）等速记动画方法不同，.animate（）方法不会使隐藏元素作为效果的一部分可见。例如，给定$（“someElement”）.hide（）.animate（{height:“20px”}，500），动画将运行，但元素将保持隐藏。
显示为无/块无法设置动画。请尝试使用“溢出：隐藏”将高度设置为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;
}

“显示为无/块”无法设置动画。请尝试使用“溢出：隐藏”将高度设置为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;
}

浏览此链接中突出显示的黄色注释。。浏览此链接中突出显示的黄色注释。。