我到处搜索,似乎找不到答案。我是一名 jquery 新手,我的所有动画都在 ScrollTop 上正常工作,但是当我滚动返回到页面顶部时,我希望带有文本的一条条纹回到其原始位置。我已经达到了它闪烁的程度,所以我认为我走在正确的轨道上。请帮忙。
这是网站:www.artdesignstudios.com/prestige/
这是我正在使用的脚本:
<script>
$(window).scroll(function(){
if ($(window).scrollTop() >= 100){
$('#stripe1').animate({'width': 0},1000);
$('#cta1').animate({'left': -100},1000)
}
else if ($(window).scrollTop() < 400) {
$("#stripe1").css({'width':'100%'},800);
$("#cta1").css('opacity','1');
}
});
</script>
最佳答案
基本上,闪烁的主要问题是,如果两者覆盖相同的范围,则条件不够,这就是我在评论中提到的情况。
N < 400 can also be >= 100 and after 400 everything is >= than 100
对于这个问题,我们需要对它们进行调整以覆盖不同的滚动
范围,或者使用boolean var
来确保动画将相应地运行是期待。
一个选项是应用这些更改,同时考虑我们可以使用 150 作为滚动高度进行测试的不同范围:
var animated = false; //added variable to control if stripe was animated
$(window).scroll(function () {
if (!animated && $(window).scrollTop() >= 150) { //changed
$('#stripe1').animate({'width': 0}, 1000);
$('#cta1').animate({'left': -100}, 1000);
animated = true; //it was animated
} else if (animated && $(window).scrollTop() < 150) { //changed
$("#stripe1").css({'width': '100%'}, 800);
$("#cta1").css('opacity', '1');
animated = false; //animation ended
}
});
检查这个FIDDLE看看它的实际效果
关于jquery 向下滚动时动画回到原始位置(?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21612386/