jQuery에서 이미지 및 루핑되지 않는 슬라이드 쇼가 흐려짐

Question

웹 사이트 용 jquery 슬라이드 쇼를 만들려고합니다. 2 개의 이미지가 있습니다. 첫 번째 이미지가 웹 사이트에 표시되면 첫 번째 이미지가 사라져서 천천히 첫 번째 이미지 대신 두 번째 이미지가 표시됩니다. 나는 이것을 반복하고 싶지 않다.

웹 페이지를 연 후에 약 4 초 후에 페이드 효과를 시작하고 싶습니다. 누군가가 나에게 올바른 코딩이 무엇인지 알려주면 감사하겠습니다. (나는 jquery에 익숙하지 않다. head 태그 나 body 태그에 코드를 두는가?).

이 코드는 내가 가지고있는 코드이지만 두 번째 이미지는 첫 번째 이미지의 아래에 나타납니다. 실제로 숨겨진 이미지가 첫 번째 이미지로 사라질 때까지 실제로 숨기고 싶습니다. 또한, 그것은 반복하고 싶지 않다.

jQuery를 :

$(document).ready(function() { 
    $('#banner img:gt(0)').hide(); 
    setInterval(function(){ 
     $('#banner :first-child').fadeOut(3000).delay(3500) 
     .next('img').fadeIn(1500).delay(3500) 
     .end().appendTo('#banner');}, 
     5000); 
}); 

HTML :

<div id="banner"> 
    <img src="images/slide1.jpg" width="1024" height="300" alt="SS Image "/> 
    <img src="images/slide2.jpg" width="1024" height="300" alt="SS Image "/> 
</div><!--end banner--> 

CSS :

#container #banner { 
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #F08840; 
    position: relative; 
    z-index:1; 
} 

Answer 1

이것은 코드입니다. 그러나 두 번째 이미지는 처음에 아래에 나타납니다. 실제로 숨겨지기를 원하는 반면, 첫 번째 이미지는 으로 사라집니다.

이전 이미지가 완전히 흐려지기 전에 새 이미지가 희미 해져서 첫 이미지 아래에서 시작되도록합니다. fadeOut()의 콜백 함수를 사용하여 이전 이미지의 페이드 아웃 시간을 확인하면 다음 이미지가 흐려질 수 있습니다.

또한 반복됩니다. 원하지 않습니다.

setInterval()은 setTimeout()으로 바꾸어야합니다.이 경우 한 번만 발생하면됩니다.

Here's a working jsFiddle.

$(document).ready(function() { 
    $('#banner img:gt(0)').hide(); 
    setTimeout(function(){ 
     $('#banner :first-child').delay('1500').fadeOut(function(){ 
      $(this).next('img').fadeIn(1500).delay(3500).end().appendTo('#banner'); 
     });    
    },3000) 
}); 

Answer 2

당신은 두 번째 이미지 코드 지금까지 시도한 것 처음 http://jsfiddle.net/q7uvn/

$(document).ready(function() { 
    $('#banner img:gt(0)').hide(); 
    setTimeout(function(){ 
     var children = $('#banner').children(); 
     children.eq(1).fadeIn(1500); 
    }, 
    4000); 
});