Question

下午全部！

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

获取父div（#general process）
添加一个更改CSS

highlight

添加短暂延迟
删除highlight类
找到下一个子项（如果最后一个返回到第一个）并重复步骤2-4

我正试图抓住这条路但仍然失败。任何人都可以建议实现这种循环动画的最佳方法吗？提前感谢任何建议!!

这是我目前的HTML＆amp; 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

jQuery为子元素循环动画

1 个答案: