子元素的 jQuery 循环动画

Question

大家下午好！

我有一个浮动 div 的小列表，我想定期突出显示其中一个。基本上我正在尝试显示一个工作流程。使用 jQuery 我希望它：

1. 获取父 div 的第一个子级（#general process）
2. 添加一个更改 CSS 的类（即 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 秒执行一次...它从当前元素中删除该类，如果我们当前位于最后一个元素，则循环回到第一个元素，然后将类添加到目标元素。

在此处查看性感演示