jQuery scrollTop動畫循環問題

Question

當我使用jQuery時，我並不十分精明，而且我正在開發一個項目，該項目涉及在手機中爲動畫部分製作動畫，以便向下滾動演示手機中的內容。我有兩個手機，並排，有動畫。它的工作方式是左側滾動，暫停，然後右側滾動，然後暫停。他們會這樣做直到他們結束。他們也有一個球形圖標，可以與它一起動畫。

我得到它的工作，但該項目的範圍是當用戶滾動到頁面上的該部分時，手機內的滾動動畫將動畫。當我試圖讓它工作時，動畫循環回到我不希望它們做的頂部。我不知道是什麼導致了這個問題。

如果任何人都可以得到任何幫助，我會非常感激。我爲我寫得不好的jQuery提前道歉。如果有更好的方法來編寫動畫，我會修改它。

這是原來的jQuery爲我工作：

http://jsfiddle.net/qxwKL/

$(function(){ 
    $(".portrait .mobile-container").animate({ scrollTop: 560 }, 1200).delay(3000).animate({ scrollTop: 1200 }, 1200); 
    $(".portrait .ball").animate({ top: 720 }, 1200, "linear").delay(3000).animate({ top: 1280 }, 1200, "linear"); 

    $(".landscape .mobile-container").delay(2000).animate({ scrollTop: 900 }, 1500).delay(3000).animate({ scrollTop: 1300 }, 1500); 
    $(".landscape .ball").delay(2000).animate({ top: 1000 }, 1300, "linear").delay(3000).animate({ top: 1300 }, 1300, "linear"); 
}); 

這是我遇到的問題之一。你需要滾動到與手機的部分觸發動畫開始播放：

http://jsfiddle.net/Gsk4n/3/

$(window).scroll(function() { 
    $('.mobile-device').each(function(){ 
     var imagePos = $(this).offset().top; 
     var topOfWindow = $(window).scrollTop(); 

     if (imagePos < topOfWindow+900) { 
      $('.portrait-contain', this).delay(1000).animate({ scrollTop: 560 }, 1000).delay(3000).animate({ scrollTop: 1590 }, 1000); 
      $('.portrait-contain .ball', this).delay(1000).animate({ top: 720 }, 1000, "linear").delay(3000).animate({ top: 1700 }, 1000, "linear");      

      $('.landscape-contain', this).delay(3000).animate({ scrollTop: 590 }, 1000).delay(3000).animate({ scrollTop: 1200 }, 1000); 
      $('.landscape-contain .ball', this).delay(3000).animate({ top: 650 }, 1000, "linear"); 
     } 
    }); 
}); 

Answer 1

我的名字是索西耶（：這是在你的段落

至於之一你的問題，我可以使用一些技巧來補救這種情況：首先，我沒有開始動畫，直到imagePos <= topOfWindow，這意味着電話的內容部分必須是完全可見的，如果你想改變它，所以它會發生更快，從imagePos減去

我改變的第二件事是你的主要問題撒謊的地方。在到達點後，您的動畫在任何時候窗口滾動時都會觸發。爲了解決這種情況，我添加了一個名爲hasAnimated的布爾值來跟蹤動畫事件是否已經觸發，並將所有動畫放在依賴該布爾值的if語句中爲false。

if(!hasAnimated) { 
    ... All of your animations ... 
} 

我加的下一件事是

if($(this) == $('.mobile-device:last')) { 
    hasAnimated = true; 
} 

，讓您的動畫不火不止一次（的如果是真的，一旦已申請的最後一個元素的動畫）

我還添加了一個

else { 
    hasAnimated = false; 
} 

之後的主if語句重置動畫如果用戶sc回滾。如果你不想要這個功能，並希望動畫只運行一次不分，刪除此

最後，我才能再次運行前的動畫重新加入了

.stop(true,true) 
.animate({ scrollTop: 100 }, 1000) // I used `scrollTop: 0` for the containers 

爲每個動畫序列。你可能想改變這種情況發生時的動畫效果點以上的用戶滾動，我只是把它放在這裏易於編程的告訴你，你可以

這一切Here's a demo在一起（：