Jquery 如何设置动画脚本

如何设置一个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>

我会使用

数据-

属性和一点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>

演示：

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

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

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