为什么在我的情况下Jquery animate（）无法正常工作？
[英]Why is Jquery animate() not working in my case?
问题描述
I have the following HTML layout: 
我有以下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>
My objective is to hide intro-wrapper whenever my window scrolls more than 60px and vice-versa. 我的目标是每当我的窗口滚动超过60px时都隐藏Intro包装器，反之亦然。 Hence I have implemented the following Jquery code to achieve the above. 因此，我实现了以下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);
}
});
But unfortunately, I have been failing miserably at understanding why the animation isn't taking place. 但不幸的是，我一直在理解为什么动画没有发生而失败。 Please point out the mistake in my above code and help me figure out the solution. 请指出我上面的代码中的错误，并帮助我找出解决方案。
Please note that console.log() is presenting results just as expected, ie, the conditions are getting appropriately fulfilled and the loop is appropriately completing its journey. 请注意， console.log()呈现的结果与预期的一样，即条件已得到适当满足，并且循环已适当地完成了其过程。
3 个解决方案
解决方案1
1 2017-04-21 20:21:47
解决方案2
1 已采纳 2017-04-21 20:24:19
display will/does not work with animate . display将/将不与animate 。 You can instead use show() and hide() in addition to the other answer. 除其他答案外，您还可以使用show()和hide() 。
From http://api.jquery.com/animate/ : 从http://api.jquery.com/animate/ ：
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. 注意：与诸如.slideDown（）和.fadeIn（）之类的速记动画方法不同，.animate（）方法不会使隐藏元素作为效果的一部分可见。 For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden. 例如，给定$（“ someElement”）.hide（）。animate（{height：“ 20px”}，500），动画将运行，但元素将保持隐藏。
解决方案3
0 2017-04-21 20:26:01
display to none/block cannot be animated. 无显示/无动画。 Try instead animate the height to 0 with overflow: hidden 尝试使用溢出将高度动画为0：隐藏
Or you can do it with css transitions easily: 或者，您可以轻松地通过CSS转换来做到这一点：
// hide it
$(".intro-wrapper").addClass('hidescroll');
// show it again
$(".intro-wrapper").removeClass('hidescroll');
And then in css: 然后在CSS中：
.intro-wrapper {
transition: height .5s ease-in;
height: 400px;
}
.intro-wrapper.hidescroll {
height: 0;
overflow: hidden;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.