이미지로드 시간이 일치하지 않습니다 (jQuery/PHP/HTML)

Question

jQuery를 사용하여 간단한 슬라이드 쇼를 만듭니다.

나는 home.php 파일에 슬라이드 쇼를 가지고 있습니다. 나는 도구 모음이있다. 메뉴에서 홈을 클릭하면 메인 페이지의 content div에 home.php를로드합니다. 슬라이드 쇼 나 메뉴에는 아무런 문제가 없습니다. 결합시 첫 번째로드시 잘 작동합니다. 그러나 여러 번로드 될 때 시간 간격은 완벽하지 않으며 불규칙한 부하 패턴으로 작동합니다. 당신이 세부 사항이 필요하면 여기 home.php

<script> 
$(function(){ 
$('.fadein img:gt(0)').hide(); 
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000); 
}); 
</script> 

와 menu.php

<li><a href=# onclick="$('#content').load('home.php') ;return false">HOME</a></li> 
<li><a href=# onclick="$('#content').load('buyitems.php') ;return false">BUY</a></li> 
<li><a href=# onclick="$('#content').load('discuss.php') ;return false">DISCUSS</a></li> 
<li><a href=# onclick="$('#content').load('locationnear.php') ;return false">NEAR YOU</a></li> 

내 코드입니다, 알려주세요.

문제 그들은 완벽하게 작동합니다. 메뉴 모음에서 집을 여러 번 클릭하면 시간이 점점 더 변하지 않습니다. 일부 이미지는 더 빠르게로드되고 다른 이미지는 느려집니다.

Answer 1

지연된 애니메이션 실행 이유는 아마도 jQuery 애니메이션 대기열 일 것입니다.

fadeOut과 같은 새로운 애니메이션은 대기열에 올려 져 있으며 동일한 요소의 이전 애니메이션이 완료 될 때까지 대기합니다. 일치하는 요소에 현재 실행중인 애니메이션을 중지

는 jQuery.stop() stop - jQuery API

설명을 사용할 수 있습니다 현재 대기열을 취소합니다.

따라서 귀하의 경우이 다음과 같습니다

$('.fadein :first-child').stop(true, true).fadeOut() 

을 아니면 효과에 애니메이션을 배치 할 수 있는지 여부를 나타내는이 애니메이션 fadeOut - jQuery API

부울에 대한 대기열을 비활성화 열. false이면 애니메이션이 즉시 시작됩니다.

if (window.currenTimer) { 
    clearInterval(window.currentTimer); 
} 
window.currentTimer = setInterval(function(){ 
    $('.fadein :first-child') 
    .stop(true, true) 
    .fadeOut() 
    .next('img') 
    .stop(true, true) 
    .fadeIn() 
    .end() 
    .appendTo('.fadein'); 
}, 3000); 

: 당신은 당신의 코드를 클릭 할 때마다 들어

$('.fadein :first-child').fadeOut({ queue : false }) 

---

편집

은 어쩌면 도움이 될 것입니다 intervall을 삭제 큐에 애니메이션을 추가 할 새로운 setInterval을 시작합니다