淡入淡出內容簡單滑塊？

Question

我不知道如何添加到這個非常非常簡單的滑塊，我試圖建立。繼承人fiddle

我的滑塊功能

function fadeContent() { 

     $(".div-roles div:hidden:first-child").fadeIn(500).delay(3000).fadeOut(500, function() { 
      $(this).appendTo($(this).parent()); 
      fadeContent(); 
     }); 

    } 

如果你知道一個更好的方式來寫這篇文章，那麼請共享，你可以添加到我的fiddle

我嘗試添加類和動畫類似於點擊功能的東西，但它看起來並不一樣，我在其他地方得到了這個代碼的想法，而且我從來沒有在函數ex中傳入函數名稱。 fadeContent();對我來說，它看起來像是什麼導致它循環，而不是100％確定它是否或.appendTo。

所以我對這篇文章的實際問題是看fiddle，你看到.static-loader它被設置爲0％，我想在它的功能內將它設置爲100％，以便內容在淡入淡出在.fadeIn(500) id像在css褪色在100％在同一時間我嘗試了許多不同的方式。

我只是不確定要採取什麼樣的角度，並希望與大家分享一些想法。

Answer 1

試圖調用fadeOut在fadeIn callback function一樣，

function fadeContent() { 
    $('.static-loader').animate({'width':'100%'},2000); 
    $(".div-roles div:hidden:first-child").fadeIn(2500,function(){ 
     $('.static-loader').width('0%'); 
     $(this).fadeOut(2000, function() { 
      $(this).appendTo($(this).parent()); 
      fadeContent();   
     }); 
    }); 
} 

Fiddle