JQuery 페이드 인

Question

플래시 애니메이션을 JQuery로 변환하는 작업이 주어졌습니다. 이것은 내 Jquery 코드를 얻으려는 것입니다. 플래시 애니메이션은 http://www.thedesigncommonwealth.com/durangoSlideshow.html입니다. 이건 내 JQuery와있다

이

지금까지 다음과 같습니다 http://www.lisa.netii.net/test-for-durango.html

난 그냥이가 반대편에 이동하기 전에 제대로 작동려고, 먼저 왼쪽에 일하고 있어요, 타이밍 사이에서 매우 중요하다 양측은 내 코드가 지금까지 그것을 처리 할 수있을 것이라고 생각합니다. Jquery 버전을 볼 때 몇 가지 명백한 문제가 있습니다. 우선 fadeIn 효과에 문제가 있습니다. .hide 효과를 사용하는 경우에도 첫 번째 이미지를 제외한 모든 이미지가 화면에 나타납니다. 각 div에 대한 Jquery 함수 줄 각각에서 .hide를 사용하려고 시도했지만 첫 번째 이미지에서만 작동하고 다른 모든 이미지는 여전히 화면에 팝업으로 표시됩니다.

첫 번째 슬라이드에도 문제가 있습니다. 현재 html의 # slide2는 slide1로되어 있지만 어떤 이유로 # slide1에서 아무 일도 일어나지 않으면 서 slide2에서 애니메이션이 시작되기 때문에 # slide1을 # slide2로 변경했지만 분명히 좋은 수정은 아닙니다. 나는이 단계를 한 번에 취할 수 있습니다 ...

아무도 내가 fadeIn 문제를 해결하기 위해 무엇을 할 수 있는지 말해 줄 수 있습니까?

$("#slide1").hide().fadeIn(200).delay(3000).fadeOut(4000); 
var t2 = setTimeout(function(){ 
    $("#slide2").hide().fadeIn(4000).delay(5000).fadeOut(4000); 
    var t3 = setTimeout(function(){ 
     $("#slide3").hide().fadeIn(4000).delay(10000).fadeOut(4000); 
     var t4 = setTimeout(function(){ 
      $("#slide4").hide().fadeIn(4000).delay(5000).fadeOut(4000); 
      var t5 = setTimeout(function(){   
       $("#slide5").hide().fadeIn(4000); 
      }, 6500); 
     }, 11500); 
    }, 6500); 
}, 6500); 

가 CSS를 보려면 및 HTML JQuery와 웹 사이트 링크를 참조하십시오 여기 내 jQuery 코드입니다.

미리 도움을 주셔서 감사합니다.

Answer 1

이 시도 :

var numberOfImages = 5; 
var fadeInSpeed = 200; 
var fadeOutSpeed = 200; 
var pause = 6500; 

function startSlideImage(index) { 
    jQuery('#slide'+index).hide().fadeIn(200, function(){ 
     jQuery(this).delay(3000).fadeOut(fadeOutSpeed, function(){ 
     setTimeout(function(){ 
      startSlideImage(index+1); 
     }, pause); 
     }); 
    }); 
} 

startSlideImage(1); 

을 다른 지연 - 시간을 추가하려면, 당신은 같은 클래스의 속성에이 데이터를 기록 할 수 있습니다 : 사용하지

<div id="slide1" class="delay-3000">...</div> 

또는 기타 특성 및 W3C -konform. 그러나 class-Attribute는 제 생각에는 최고입니다. class-Attribute가 다른 값을 가지고 있다면, 그것을 .split ('') 공백으로 나누고 인덱스를 잡을 수 있습니다.

그 후 당신과 지연을 읽을 수 있습니다

var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10); 

그래서 당신의 기능은 다음과 같이해야한다 :

function startSlideImage(index) { 
    jQuery('#slide'+index).hide().fadeIn(200, function(){ 
     var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10); 
     jQuery(this).delay(delay).fadeOut(fadeOutSpeed, function(){ 
     setTimeout(function(){ 
      startSlideImage(index+1); 
     }, pause); 
     }); 
    }); 
}