2011-02-10 3 views
-1

Как бы вы создать 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> 

ответ

0

Я хотел бы использовать 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/

+0

тот прохладный ТНХ! –

Смежные вопросы