jQuery fadeIn() 및 fadeOut()을 사용하는 올바른 방법은 무엇입니까?

Question

나는 텍스트 배열을 페이드 아웃하는 것을 만들고있다.

이 지금까지 내 작품 : 나는에 밖으로 텍스트를 퇴색하고있어,하지만 난 그게 렌더링 볼 때 타이밍이 꺼져 http://jsfiddle.net/9j7U6/

.

$("#wantPlaceholder").fadeOut().html(wants[i]).fadeIn(2000).delay(3000); 

올바른 방법은 무엇입니까?

Answer 1

콜백을 사용하십시오. 애니메이션이 완료되면 콜백이 호출됩니다. 다음 코드는 요소를 페이드 아웃합니다. 완전히 사라지면 HTML이 수정 된 다음 다시 사라집니다.

$("#wantPlaceholder").fadeOut(1000, function(){ 
    $(this).html(wants[i]); 
    $(this).fadeIn(2000); 
}); 

편집 : 음, 루프가 something like this 할 수있다 :

(function myLoop(items, index) { 
    index = (items.hasOwnProperty(index) ? index : 0); 
    $("#wantPlaceholder").delay(3000).fadeOut(1000, function() { 
     $(this).html(items[index]); 
     $(this).fadeIn(1000, function() { 
      myLoop(items, index + 1); 
     }); 
    }); 
}(wants, 0)); 

Answer 2

먼저 텍스트가 페이드 아웃() 핸들러에서 변경해야

function rotateWants() { 
    var i = 0; 
    var wantsLength = wants.length; 

    function fade() { 
     $("#wantPlaceholder").delay(5000).fadeOut(function() { 
      $(this).html(wants[i]); 
      i++; 
      if (i >= wantsLength) { 
       i = 0 
      }; 
     }).fadeIn(2000, fade); 
    } 

    fade(); 
} 

데모 : Fiddle