向上滚动页面时尝试为div设置动画
[英]Trying to animate a div when scrolling up a page
问题描述
i'm trying to find out why element2 does not shrink back to 300 px when I scroll back up the page. 
我试图找出为什么当我向上滚动页面时element2不会缩小到300 px。 When I scroll down It grows but when I scroll up it doesn't shrink back. 当我向下滚动时，它会增长，但是当我向上滚动时，它不会后退。 I'm also curious why sometimes the width toggles by itself when I'm in the scrolling area (like a delayed reaction). 我也很好奇为什么在滚动区域中有时宽度会自己切换（例如延迟的反应）。
$(document).ready( function(){
var lastSCroll = 0;
$(window).on("scroll", function(){
var scrolled = $(window).scrollTop();
if(scrolled > 470 && scrolled <1150){
$(".element2").show("slow").css({"top" : scrolled + 30});
}
if( scrolled > 770 && scrolled < 1150 && scrolled > lastSCroll){
$(".element2").animate({"width" : "500px"})
}
if(scrolled > 770 && scrolled < 1150 && scrolled < lastSCroll){
$(".element2").animate({"width" : "300px"})
}
$(".display").html(scrolled + ": lastScroll--> " + lastSCroll)
lastSCroll = scrolled ;
});
HTML: HTML：
<body>
<div class="element">Test</div>
<div class="element2">TEST 2</div>
<div class="display"></div>
<div class="firstCont"></div>
<div class="secondCont"></div>
<div class="thirdCont"></div>
<div class="fourthCont">4th</div>
CSS: CSS：
*{
margin: 0;
padding: 0;
}
.firstCont{
height: 100vh;
background: pink;
}
.display{
position: fixed;
top: 0;
right: 0;
padding: .5em 1em;
background: rgba(120,0,0,0.3);
z-index: 5;
}
.secondCont{
height: 100vh;
background: hotpink;
}
.thirdCont{
height: 100vh;
background: seagreen;
}
.fourthCont{
height: 100vh;
background: skyblue;
}
.element{
position: absolute;
width: 300px;
background: blue;
height: 200px;
display: none;
}
.element2{
background: gold;
width: 300px;
height: 200px;
position: absolute;
display: none;
}
1 个解决方案
解决方案1
1 已采纳 2015-09-19 17:26:45
Adding stop() before animate() seems to do the trick. 在animate() stop()之前添加stop()似乎可以解决问题。 It prevents the animation queue building up and causing strange behaviour. 它可以防止动画队列增加并引起奇怪的行为。 https://jsfiddle.net/o9o7ogsz/2/ https://jsfiddle.net/o9o7ogsz/2/
JS JS
$(document).ready(function () {
var lastSCroll = 0;
$(window).on("scroll", function () {
var scrolled = $(window).scrollTop();
if (scrolled > 470 && scrolled < 1150) {
$(".element2").show("slow").css({
"top": scrolled + 30
});
}
if (scrolled > 770 && scrolled < 1150 && scrolled > lastSCroll) {
$(".element2").stop().animate({
"width": "500px"
})
}
if (scrolled > 770 && scrolled < 1150 && scrolled < lastSCroll) {
$(".element2").stop().animate({
"width": "300px"
})
}
$(".display").html(scrolled + ": lastScroll--> " + lastSCroll)
lastSCroll = scrolled;
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.