jQuery子元素循環動畫

Question

下午所有！

我有一個浮動div的小列表，我想要定期突出顯示一個div。基本上我試圖顯示一個工作流程。使用jQuery我希望它：

1. 獲取其改變CSS父DIV（#general process）
2. 添加一個類（即highlight）的第一個孩子
3. 添加一個短暫的延遲
4. 刪除highlight類
5. 查找下一個子項（如果最後返回到第一），並重復步驟2-4

我試圖通過這個方式來抓我的方式，但保持失敗。任何人都可以提出實現這個循環動畫的最佳方式嗎？在此先感謝您的任何建議！！

這裏是我當前的HTML CSS &：

<div id="general_process"> 
    <div class="phase"> 
     <div class="number">1</div> 
     <h3>Some title</h3> 
     <p>Content goes here</p> 
    </div> 
    <div class="phase"> 
     <div class="number">2</div> 
     <h3>Some title</h3> 
     <p>Content goes here</p> 
    </div> 
    <div class="phase"> 
     <div class="number">3</div> 
     <h3>Some title</h3> 
     <p>Content goes here</p> 
    </div> 
</div> 

#general_process {margin: 0; padding: 0; } 
#general_process div.phase { float: left; padding: 10px 25px; background: #f9f9f9; width: 254px; border: 1px soild #999999;} 

Answer 1

(function (elements) { 

    var i = -1; 
    var className = 'highlighted'; 

    if (!elements.length) { 
     return false; 
    } 

    function step() { 
     elements.eq(i).removeClass(className); 

     if (++i >= elements.length) { 
      i = 0; 
     }; 

     elements.eq(i).addClass(className); 

     setTimeout(step, 3000); 
    } 

    step(); 

}($('#general_process').children())); 

我們用一個封閉自我包含所有我們用來跟蹤狀態的變量。

然後，我們有一個函數step()，它每3秒執行一次......它從當前元素中移除類，如果我們當前位於最後一個元素，則返回到第一個元素，然後將類添加到目標元素。

View a sexy demo here