Question

你如何设置一个jquery脚本来循环一些列表项，并在定时延迟时添加/删除它们的类

<ul>
<li></li><!-- the class ".jump" is added for 3 seconds then the class is removed -->
<li></li><!-- the class ".jump" is added for 1.5 seconds then the class is removed -->
<li></li><!-- the class ".jump" is added for 2 seconds then the class is removed -->
<li></li><!-- the class ".jump" is added for 1 seconds then the class is removed -->
<li></li><!-- the class ".jump" is added for 5 seconds then the class is removed -->
</ul>

Answer 1

我会使用data-属性和一点Javascript：

<强> HTML

<ul>
    <li data-delay="3000">hello</li>
    <li data-delay="1500">World!</li>
    <li data-delay="2000">Foo</li>
    <li data-delay="1000">Bar</li>
</ul>

<强>的Javascript

$(function() {
    var $items = $('ul li').addClass('jump');

    $items.each(function() {
        var $self = $(this);

        setTimeout(function() {
            $self.removeClass('jump');
        }, $self.data('delay'));
    });
});

演示：http://www.jsfiddle.net/bM6uY/5/

如何为动画设置脚本

1 个答案: