jquery fadeOut()/fadeIn() hiccup

Question

나는 htmled에서 얻은 jquery 코드를 가지고 사진을 다음에서 다음으로 변환합니다. 그러나 나타나는 두 번째 이미지는 즉시 나타나고 다음 그림으로 이동합니다. 그 후 루프는 부드럽고 아무런 문제가 없습니다.

$('.fadein img:gt(0)').hide(); 
setInterval(function() { 
    $('.fadein :first-child').fadeOut(1500) 
          .next('img') 
          .fadeIn(1500) 
          .end() 
          .appendTo('.fadein'); 
}, 4000); // 4 seconds 

당신이있어 행동에서 볼 수 있습니다 : http://www.zerogravpro.com/yurt/

Answer 1

잘 닫는 body 태그 전에 자바 스크립트의 모든 이동하십시오

다음은 jQuery의.

또한 DOM이 준비 될 때까지 코드가 실행되지 않도록 $(function() {});에 추가 jQuery를 래핑해야합니다. 아래를 참조

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
    $('.fadein img:gt(0)').hide(); 

    setInterval(function() { 
    $('.fadein :first-child').fadeOut() 
          .next('img') 
          .fadeIn() 
          .end() 
          .appendTo('.fadein'); 
    }, 4000); // 4 seconds 
}); 
</script> 

Answer 2

$('.fadein img:gt(0)').hide(); 

DOM이 inited는되기 전에 호출되기 때문에이 줄은 작동하지 않습니다. 따라서 두 번째 이미지는 첫 번째 이미지 대신 처음에 표시되며 딸꾹질이 발생합니다.