jQuery 슬라이드 쇼에 대한 끈적한 상황

Question

jQuery와 함께 슬라이드 쇼를 개발해야합니다 (기존 슬라이드가 아닌). 나는 changePic이라는 명명 된 함수로 그림을 바꿀 수 있었다. jQuery 라이브러리의 페이딩 애니메이션을 통합합니다.

슬라이드 쇼의 경우 while 루프를 사용하려고합니다. 애니메이션이 끝나기를 기다리지 않는다는 점을 제외하면 일종의 작품입니다.

어떻게하면 애니메이션이 끝날 때까지 기다릴 수 있습니까? b) 변화하는 그림이 지연되어 몇 초 동안 그림이 표시 될 수 있습니까?

Settimeout을 시도해도 작동하지 않습니다.

편집 :

기본적으로 변화하는 이미지는 다음과 같이이다 :

function changePic(imglink){ 
    var imgnode = document.getElementById("galleryimg"); 
    $(imgnode).fadeTo(500, 0, function(){ 
     $(imgnode).attr("src", imglink); 
     $(imgnode).fadeTo(1000, 1); 
    }) 
} 

및 슬라이드 쇼 코드는 다음과 같이하지만, 분명히는 안된다.

function slideshow(gallerylinks){ 
    var i=0; 
    while (i<gallerylinks.length){ 
     changePic(gallerylinks[i]); 
     i++; 
    } 
} 

Answer 1

당신은 항상 while 루프를 죽겠다, 그리고 끊임없이 순환 기능을가는 시도 할 수 ... .animate에

, 당신은 changePic 함수를 호출 (어떤 간격) 시간 제한 기능을 추가 할 수 있습니다. 귀하의 코드가 어떻게 생겼는지 모르겠으므로 환상적인 개요를 제공 할 것입니다. 화상을 페이드 아웃 (이론)

/* array of imgUrls */ 

var imgUrls = new Array(); //populate it however 
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay) 
{ 
    $('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){ 
     $('#slideHolder').attr('src', imgUrls[slideToShowIndex]); 
     $('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() { 
      setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay}); 
     }); 
    }}); 
} 

$(document).ready(function() { 
changePic(0, 5000, 5000, 10000); 
}); 

이는 새 것으로 교체하고 (모두 5 초 복용), 그리고 (10) 내의 다음 슬라이드 인덱스 자체를 호출 지연을 추가하는 것이 퇴색한다 초.

이것은 완벽하지는 않지만 일반적인 생각을 요약합니다. 코드가 어떻게 생겼는지 모르기 때문에 setTimeout이 잘못된 위치에 있다고 가정 할 수 있습니다. 이렇게하면 타임 아웃이 설정되기 전에 애니메이션이 끝났는지 확인할 수 있습니다. 이렇게하면 애니메이션이 변경 될 때까지 슬라이드가 변경되지 않습니다.

물론 ': not (: animated)'선택기와 setInterval을 함께 사용하면 거의 동일한 효과를 얻을 수 있습니다.

EDIT : 애니메이션을 제대로 스택하기 위해 약간의 수정을가했습니다. 이것의 뒤에 thoery는 부호의 OPs조차를 가진조차 아직도 작동한다.

Answer 2

당신은 자세한 내용이나 예제 코드를 제공하지만, stop() 및 delay() 기능을 살펴 가지고 있었다.