jquery在向下滚动时动画回到原始位置（？）答案

【问题标题】：jquery animate back to original position on scroll DOWN(?)jquery在向下滚动时动画回到原始位置（？）
【发布时间】：2014-02-06 19:39:48
【问题描述】：

我搜索了高低，似乎找不到答案。我是一个 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>

【问题讨论】：

最好有一个boolean 说明它是否具有动画效果，导致else 条件可能无法像您期望的那样工作，因为 = 100 并且在 400 之后的所有内容>= 大于 100，这是第一步
谢谢。你能给我举个例子吗？

标签： jquery dynamic jquery-animate scrolltop

【解决方案1】：

基本上闪烁的主要问题是，如果两者覆盖相同的范围，则条件不够，这是我在cmets中提到的情况。

N < 400 can also be >= 100 and after 400 everything is >= than 100

对于这个问题，我们需要对它们进行调整以覆盖scroll 的不同范围，或者使用boolean var 来确保动画按照预期运行。一个选项是应用这些更改，尊重我们可以用 150 作为scroll height 测试的不同范围：

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 以了解其实际效果

【讨论】：

我明白了！非常感谢！