2013-05-01 1 views
1

이 코드가 애니메이션을 표시하지 않는 이유를 누구나 볼 수 있습니까? Chrome에서 애니메이션이 올바르게 실행되고 있음을 알 수 있습니다 (F12 도구에서 애니메이션이 발생하는 것을 볼 수 있고 div가 전환 중임). 그래서 코드가 작동하지만 주 이미지가 움직이지 않는 것을보고 있습니다. remove()가 호출되면 사라지고 다음 이미지가 바로 표시됩니다.Jquery fadeOut not animating

IE10과 Chrome을 확인한 결과 둘 다 똑같습니다. 나는 또한 동일한 결과를 가진 animate ('opacity')를 사용하여 시도했다.

나는 그것을 볼 수는 없다. 그러나 내가 너무 오랫동안 그것을보고 있었기 때문에 내가 놓친 것 같다는 것을 짐작하고있다!

도움 주셔서 감사합니다.

스크립트 :

function fader(){ 
    $('#fader div:first').fadeOut(600,function() { 
     $('#fader').append('<div class="faderitem">'+$('#fader div:first').html()+'</div>'); 
     $('#fader div:first').remove(); 
     setTimeout('fader()',6000); 
    }); 
} 

CSS의 :

#fader { 
    width:620px; 
    height:620px; 
    position:relative; 
} 
#fader div.faderitem { 
    width:620px; 
    height:620px; 
    position:absolute; 
    top:0; 
    left:0; 
} 

그리고 HTML은 :

<div id="fader"> 
    <div class="faderitem"><img src="/images/scroller/26-a.jpg" alt="" width="620" height="620" /></div> 
    <div class="faderitem"><img src="/images/scroller/26-b.jpg" alt="" width="620" height="620" /></div> 
    <div class="faderitem"><img src="/images/scroller/26-c.jpg" alt="" width="620" height="620" /></div> 
</div> 
+1

내가 전달 본 적이 없어 setTimeout에 대한 문자열로 함수. 그게 효과가 있다고 확신합니까? 나는 그것을'setTimeout (fader, 6000);으로 할 것입니다. –

답변

2

이것은 단순히 때문에 Z- 인덱스이다. 보시다시피, 다른 것들 뒤에있는 페이더의 첫 아이를 움직이게 할 수 있습니다.

간단히 그 CSS를 추가, 그것이 작동해야 후 :

#fader.faderitem:nth-child(1){ 
    z-index : 2 
} 
#fader.faderitem:nth-child(2){ 
    z-index : 1 
} 

편집 : 오웬 Masback가 했나요 같이, 제한 시간을 설정하는 좋은 방법은 같다 : setTimeout(fader,6000);

+0

감사합니다. 나는이 함수를 만들었고 이제는 모두 좋다. 'function fader() { \t $ ('#fader div.faderitem : nth-child (1)') .css ('z-index', 2); \t $ ('#fader div.faderitem : nth-child (2)') .css ('z-index', 1); .. \t $ ('# 페이더 사업부 : 첫 번째') 페이드 아웃 (2000, 기능() { \t \t $ ('# 페이더') ('

'+$('#fader div:first').html()+'
') 추가; \t \t $ ('# 페이더 DIV를 : first '). remove(); \t \t setTimeout (fader, 6000); \t}); }' –