jQuery Array fadeIn無法正常工作

Question

我試圖淡入數組中的fadeOut項目到div。我試圖以fadeIn fadeOut方式進行這項工作。因此，第一項消失在停留3 secodns然後淡出，然後下一個項目淡入淡出，3seocnds然後淡出等.....爲什麼我的代碼是錯誤的。檢查http://jsfiddle.net/Fpu2E/1/

Answer 1

你使用會出於種種原因工作的代碼 - 有呼叫fadeOut和fadeIn之間的零延遲意味着你不會得到你淡入淡出之間尋找的3秒延遲，而且通話這兩個函數都會導致jQuery效果隊列產生一些奇怪的效果。

一個更好的選擇將是一起使用遞歸函數delay做到這一點：

var div = $('div').hide(), 
    news = ['news1', 'news2', 'news3'], 
    count = 0; 

function changeNews() { 
    div.fadeIn(3000).delay(3000).fadeOut(3000, function() { 
     changeNews(); 
    }).text(news[count++]); 
} 

changeNews(); 

這方面的一個簡單的演示可以在這裏找到：http://jsfiddle.net/Fpu2E/4/

Answer 2

這工作...

var news = ['news1', 'news2', 'news3'], 
    count = news.length, 
    currentItem = 0; 

showNextItem = function() { 

    $('div').text(news[currentItem++]).fadeIn(3000, function() { 
     var element = $(this); 
     setTimeout(function() { 
      element.fadeOut(1000, function() { 
       if (currentItem < count) { 
        showNextItem(); 
       } 
      }); 

     }, 3000); 
    }); 

}; 

showNextItem(); 

jsFiddle。