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動畫回滾到原始位置向下滾動（？）

回答

相關問題