jquery 슬라이더가 부드럽게 변환되지 않습니다.

Question

Christiaan Scheermeijer 덕분에 슬라이더가 올바르게 전환되었습니다. 그러나 지금은 이미지의 초점이 꺼져있는 것처럼 보입니다. 슬라이드를 올바르게 부드럽게 만들기 위해 z- 인덱스 또는 다른 것을 사용해야합니까? 현재 "사라져야하는 것"은 슬라이드 4 뿐이며 슬라이드 1로 다시 전환됩니다. 정말 당황 스럽습니다. 페이드 타임에 타이밍을 시도했는데 문제가되지 않습니다. '다음 슬라이드'가 사라져야하는 슬라이드 위로 포어 그라운드로 튀어 나오고있는 것처럼 보입니다.

http://jsfiddle.net/WASasquatch/haBAS/2/

$('#hi1').fadeTo("slow", 1.0); 
var slide = 0, 
slides = 4, 
ids = [ 
    '#hi1', 
    '#hi2', 
    '#hi3', 
    '#hi4', ]; 
slideShow = setInterval(function() { 
    var nextSlide = slide + 1; 
    if (nextSlide > slides - 1) { 
     nextSlide = 0; 
    } 
    $(ids[nextSlide]).fadeTo(100, 1.0); 
    $(ids[slide]).fadeTo(1200, 0); 
    slide++; 
    if (slide > slides - 1) { 
     slide = 0; 
    } 
}, 5000); 

Answer 1

이 시도하십시오.

변경 :

$(ids[slide]).fadeTo(300, 0); 
$(ids[nextSlide]).fadeTo(2300, 1.0); 

그리고 #container CSS 규칙에 추가 :

$(ids[nextSlide]).fadeTo(100, 1.0); 
$(ids[slide]).fadeTo(1200, 0); 

도

background-color: #000; 

가 필요하지 비록, 당신은 (역시 이러한 변화를 고려해 볼 수 있습니다 작동 시키려면 코드를 간소화하십시오).

변경 :

slide++; 
if (slide > slides - 1) { 
    slide = 0; 
} 

사람 :

이

slide = nextSlide; 

(이미 다음 슬라이드가 될 것입니다 무엇을 계산 한, 당신은 단지 대신 다시 계산하고 경계를 확인하는 데 사용할 수 있습니다.)

다른 제안은 slides이있는 ids.length을 사용하고, slides를 제거하는 것이 좋습니다.- 이것이 슬라이드를 추가 또는 제거하기로 결정한 경우 slides 수를 업데이트하는 것을 잊지 않아도됩니다. 이는 많은 사용자가 ids에서 지정한 것만으로 작동합니다. 정렬.

이것을 고려하십시오 JSFiddle.