JQuery 페이드 인 setInterval이 산발적으로 작동하는 경우

Question

멋진 JQuery fadeIn 및 fadeOut을 사용하여 매 2 초마다 한 번에 하나씩 회전해야하는 이미지 모음이 있습니다. HTML에있는 모든 이미지를 미리로드하고 현재 이미지를 페이드 아웃하는 setInterval 타이머를 가지고 다음 이미지를 페이드 인합니다. 페이드 인/아웃 프로세스 중에 클릭하거나 스크롤 할 때 가끔 문제가 발생합니다. JS가 중단되고 현재 이미지가 사라지지 않으며 다음 이미지가 사라져 두 개의 이미지가 표시됩니다.

2 초마다 제대로 실행되지 않는 setInterval과 관련이 있다는 느낌이 들지만 필요한 부분을 수행하는 데 더 좋은 방법이 있습니까?

<a href="javascript:;"> 
    <img id="img1" src="image1.gif" /> 
    <img id="img2" src="image2.gif" style="display:none;" /> 
    <img id="img3" src="image3.gif" style="display:none;" /> 
</a> 

JS

var numImages = 3; 
var currentImage = 1; 
imageInterval = window.setInterval("changeImage();", 2000); 

function changeImage() 
{ 
    $("#img" + currentImage).fadeOut("slow", function() { 
     if (currentImage >= numImages) 
     { 
      currentImage = 0; 
     } 
     $("#img" + (currentImage + 1)).fadeIn("slow", function() { 
      currentImage++; 
     }); 
    }); 
} 

Answer 1

당신은 ID = "IMG2"가 두 번

HTML :

여기에 코드 조각입니다.

간단히 할 수 없습니까? 현재 ID와 다음 ID를 먼저 계산할 수 있습니까? 그런 다음 $(). fadeOut()과 다음 줄 $(). fadeIn()을 수행하고 모든 함수의 복잡성을 피하십시오.

Answer 2

그냥 내 머리 꼭대기에서 ... 콜백 기능에서 currentImage 부기를하고있는 이유는 무엇입니까? 이것이 쉽게 날 것으로 보인다, 심지어 당신의 문제를 함께 할 수있는 뭔가가있을 수 있습니다 :

function changeImage() 
{ 
    $("#img" + currentImage).fadeOut("slow"); 
    currentImage = (currentImage >= numImages) ? 1 : currentImage + 1; 
    $("#img" + currentImage).fadeIn("slow"); 
} 

Answer 3

귀하의 문제는이 페이드 완료되기 전에 당신이 IMG2을 클릭하면, currentImage은 아직도 당신이 후 찾고 생각이다 img1과 img2 사이의 변환이지만, 실제로 img2는 현재 라이브이며 img3을 기다리고 있습니다.

나는 짐의 해결책이 괜찮을 것이라고 생각한다.

numImages = $("a > img").size(); 

Answer 4

당신이 Cycle Plugin를 사용하는 방법에 대해 생각 해본 적이하십시오 freebee으로

이 너무 스크립트를 편집하지 않고 더 많은 이미지를 추가 할 수 있도록 추가 고려? 이것이 바로 당신이하려는 일을하는 것처럼 들리며, 많은 유연성을 제공합니다. 이 플러그인을 직접 사용해 보았습니다. 추천.

Answer 5

또한

내가 snook.ca's simplest jquery slideshow의 기반으로 기능을 사용하여 비슷한 문제에 봉착

setInterval (function() { 
    $("img:eq(0)").fadeOut ("slow").next ("img").fadeIn ("slow"); 
}, 2000); 

Answer 6

. (내 의견을 @tom 참조) 비록 내 클릭 또는 스크롤 여부와 상관없이 내 일이 일어난다!

사이클을 처음 실행 한 후 타이밍이 엉망이되어서 페이드 인하거나 페이드 아웃이되어서 페이드 인으로 시작하는 것처럼 보입니다! 방화 광에서 html 패널을보고 있었는데 css 표시 속성이 '블록'에서 'none'으로 올바르게 설정되지 않고 결국 이미지가 모두 display:block 인 것으로 가정하고 결과적으로 예상되는 페이드 상태를 나타내지 않는 것으로 나타났습니다.

이것이 퇴색 속도가 혼합 된 순서를 유발하는 setInterval 지연으로 엉망이되어 버린 타이밍 문제인지 궁금해했습니다. 이 경우에 나는 그것을 고치는 법을 모른다.

그러나 CSS 동작을 보았을 때 jQuery가 'fadeIn'및 'fadeOut'함수를 구현하는 방식에 근본적인 문제가 있는지 궁금합니다.