使用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