jQuery 애니메이션이 올바르게 작동하지 않습니다.

Question

내 jQuery 애니메이션이 안정적으로 발생하지 않고 모든 타이밍이 꺼져있는 것처럼 보입니다. 그것은 빠르게 위아래로 움직일 것이고 때로는 오직 절반 만 움직일 것입니다. setimeout 메서드는 지연보다 좋지만 여전히 잘 작동하지 않습니다.

이것은 내가 현재 성공적으로 div를 위아래로 움직이고 있으며 페이지에서 무엇을하는지에 따라 얼마나 신뢰할 수 있는지에 달려 있습니다. 내가 .load()을 많이하고 있어요 때 때때로 미친 간다하지만 다른 시간 내가 scroloTop 0 선을 제거한하지만 무작위 맨 위로 스크롤

<script type="text/javascript"> 

$(document).ready(function scrollplaying() { 
    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 50 
    }, '500'); 
    }, 2000); 

    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 0 
    }, '500'); 
    }, 5000); 

    window.setTimeout(function() { 
    scrollplaying() 
    }, 8000) 
}); 

</script> 

괜찮습니다. 나는 다른 곳

Answer 1

문제는 서로 다른 것들() 콜백 당신이 .load에 넣을 내용에 따라 코드의 이러한 유형의 발생할 수 있습니다 기본적으로 scroilltop과 지연 사이를 사용하고 있지 않다 이벤트.

DOMContentLoaded ("ready") 이벤트는 "load"이벤트 전에 발생하지만 일반적으로 두 이벤트 간의 지연을 알지 못하는 문제가 있습니다. 의 setTimeout 콜백 전 또는 "로드"이벤트 후에 실행 될 경우 당신이 모르는

$(document).ready(function() { 
    setTimeout(function() { 
    // Do some stuff 
    // ... 
    }, 2000); 

: 같은 코드를 실행함으로써

.

간단히하기 위해 (setTimeout 지연이 절대 정확하지 않기 때문에) DOMContentLoaded 이벤트와 load 이벤트 간의 지연 시간이 2 초 미만이면 setTimeout 콜백은 load 이벤트 이후에 실행됩니다 (그리고 다음에 등록 된 콜백 이후). ".load()"). 그렇지 않으면, 그들은 전에 처형 될 것입니다.

해결 방법은 "로드"및 "준비"이벤트 사이의 지연이 무엇이든간에 코드가 이에 대처할 수 있는지 확인하는 것입니다.

당신은 고려할 수 있습니다 :

1. 는 ".ready()"콜백으로 ".load()"에 콜백을 사용하면 코드의 수만큼 이동. 가능한 경우 "준비"이벤트를 선호해야합니다.
2. 일부 코드가 실제로 "load"이벤트에 의존하는 경우이 코드 (및 해당 코드에 의존하는 코드, 질문의 스 니펫 포함)를 ".load()"에 넣어야합니다.

그것을 할 빠른 때문에 사용, 지금 테스트해야합니다 : 그것은 작동하는 것 같다 경우에도

는

<script type="text/javascript"> 

$(window).load(function scrollplaying() { 
    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 50 
    }, '500'); 
    }, 2000); 

    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 0 
    }, '500'); 
    }, 5000); 

    window.setTimeout(function() { 
    scrollplaying() 
    }, 8000) 
}); 

</script> 

그러나, 당신은 정말 옵션이 "1"을 고려해야합니다.

이 준비 이벤트가 느린 (또는 충돌) 서버에 외부 리소스에 의해 영향을받을 가능성이 기억, 그러나 창 "로드"이벤트는 매우 늦게이 경우에 발생할 수 있습니다. 아니면 결코 일어나지 않을 것입니다. "ready"이벤트는 가능한 경우 실제로 선호되어야합니다. `;

희망이 당신이`$ (창) .load를 사용하여 의미합니까 (함수() {/ * ... * /}) ".load()"를함으로써

Answer 2

DEMO

<script type="text/javascript"> 

$(document).ready(function() { 
    $("html, body").animate({scrollTop: '50px'},2000,function(){ 
      $(this).animate({scrollTop: '0px'}, 3000); 
    }); 

}); 

</script>