jquery - ユーザーがホバーしている間、内側の div 要素をループでフェードイン/フェードアウトさせる

Question

ここ Stackoverflow の他の場所で多数の例を試しましたが、うまくいきませんでした。基本的に、ユーザーが article 要素をホバーしている間、ループでフェードインおよびフェードアウトしたい多数の子要素を持つ単純な div があります。私がここまでたどり着いた場所をここで見ることができます：

http://jsfiddle.net/rWXu7/

私のHTML：

<article class="product">
<div class="offers">
    <div>Offer 1</div>
    <div style="display: none;">Offer 2</div>
    <div style="display: none;">Offer 3</div>
</div>

私のJS：

    var tickerID;
$("article.product").hover(function(){

    var list=$(this).find('div.offers > div');

    (function repeatTicker() {
      list.each(function(index) {
        $(this).fadeIn('slow').delay(2000).fadeOut('slow');
      });
      tickerID = setTimeout(repeatTicker, 2000);
    } ());
},
// Rollout
function(){
    clearTimeout(tickerID);
});

私のCSS：

article {
    background-color: red;
    padding: 20px;
}

現時点でわかるように、各ループはすべての要素で一度にフェードイン、ディレイ、フェードアウトを開始しますが、各要素を一度に 1 つずつ「循環」させたいと考えています。

これがそのままではうまくいかない理由はわかりますが、問題を最もよく解決する方法を考え出すのに時間がかかっています。

単一のフェード イン/アウト ループではやり過ぎに思えるので、「innerfade」のようなものを使用することは避けたいと思います。

どんな考えでも大歓迎です。:)