jquery动画回滚到原始位置向下滚动（？）

我搜索了高和低，似乎无法找到答案。我是一个jquery新手，我的所有动画在ScrollTop上都能正常工作，但是当我滚动回到页面顶部时，我希望带有文本的条纹回到原始位置。我一直在闪烁，所以我认为我在正确的轨道上。请帮忙。jquery动画回滚到原始位置向下滚动（？）

这里是网站：www.artdesignstudios.com/prestige/

这里是工作的IM：

<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>

来源

2014-02-06 user3281117

这将是最好有一个'boolean'说如果它有动画或不会导致'else'条件可能无法像你期望的那样工作，因为<400也可以> = 100，400之后所有条件> = 100以上，那第一步 –

谢谢。你能告诉我一个例子吗？ – user3281117

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

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看到它在行动

来源

2014-02-20 16:55:46

我看到了！非常感谢你！ – user3281117

jquery动画回滚到原始位置向下滚动（？）

回答

相关问题