我有以下 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>
我的目标是在我的窗口滚动超过 60 像素时隐藏 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() 正在按预期呈现结果，即，条件得到适当满足，循环适本地完成它的旅程。
最佳答案
display 将/不与 animate 一起工作。除了其他答案之外，您还可以使用 show() 和 hide()。
来自 http://api.jquery.com/animate/ :
注意:与 .slideDown() 和 .fadeIn() 等速记动画方法不同，.animate() 方法不会使隐藏的元素作为效果的一部分可见。例如，给定 $( "someElement").hide().animate({height: "20px"}, 500)，动画将运行，但元素将保持隐藏状态。
关于javascript - 为什么 Jquery animate() 在我的案例中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43551344/