Как настроить скрипт для анимации

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>

1010 * 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/