jQuery scrollTop animation 루핑 문제

Question

jQuery 사용에 관해서는 잘 알지 못합니다. 전화기 안의 내용을 애니메이트하는 프로젝트와 관련하여 프로젝트 내용을 보여주기 때문에 전화 내용을 보여줍니다. 나는 2 대의 전화를 나란히 놓고 움직인다. 작동 방식은 왼쪽으로 스크롤하고 일시 중지 한 다음 오른쪽으로 스크롤 한 다음 일시 중지합니다. 그들이 끝날 때까지 그들은 이것을 할 것입니다. 그들은 또한 그것으로 움직이는 공 아이콘을 가지고 있습니다.

나는 작동하게되었지만 사용자가 페이지의 해당 섹션으로 스크롤 할 때 휴대폰 내의 스크롤 애니메이션이 움직이는 것이 프로젝트의 범위입니다. 이를 작동 시키려고 할 때 애니메이션은 내가 원하지 않는 맨 위로 되돌아갑니다. 나는이 문제의 원인을 모른다.

누구나 도움을받을 수 있다면 정말 고맙겠습니다. 저조한 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"); 
}); 

이 내가 함께 문제가있어 하나입니다

이

은 나를 위해 일한 원래 jQuery를합니다. 내 이름은 Saucier (

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

에서 뺍니다.

내가 두 번째로 변경 한 부분은 주요 문제가 거짓말 한 부분입니다. 지점에 도달 한 후 창을 스크롤 할 때마다 애니메이션이 실행되었습니다. 상황을 수정하기 위해 애니메이션 이벤트가 발생했는지 여부를 추적하고 해당 애니메이션에 false를 사용하는 if 문 안의 모든 애니메이션을 넣으려면 hasAnimated이라는 부울을 추가했습니다. 내가 추가

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

다음 것은 애니메이션이 한 번 이상 발생하지합니다 (마지막 요소에 대한 애니메이션이 적용되어 한 번에 해당하는 경우)

I하게

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

했다 또한 a를 추가했다

else { 
    hasAnimated = false; 
} 

주 if 명령문 다음에 사용자 sc 롤백합니다. 이 기능을 원하는 만에 애니메이션이 한 번에 관계없이 실행하지 않으려면,이

마지막을 제거, 다시 실행하기 전에 애니메이션을 재설정하기 위해 각 애니메이션 시퀀스에

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

추가 .