JQuery петлевая анимация для дочерних элементов - PullRequest
Новая
       10

JQuery петлевая анимация для дочерних элементов

2 голосов
/ 05 августа 2011

Всем днем!

У меня есть небольшой список всплывающих элементов, которые я хочу периодически выделять.В основном я пытаюсь отобразить процесс рабочего процесса.Используя jQuery, я хочу:

  1. Получить первый дочерний элемент родительского div (#general process)
  2. Добавить класс (т.е. highlight), который изменяет CSS
  3. Добавить небольшую задержку
  4. Удалить класс highlight
  5. Найти следующий дочерний элемент (если последний вернется к первому) и повторить шаги 2-4

Я пытаюсь пройти через это, но продолжаю терпеть неудачу.Кто-нибудь может предложить лучший способ достижения этой цикличной анимации?Заранее спасибо за любые предложения !!

Вот мой текущий HTML & 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;}

1 Ответ

3 голосов
/ 05 августа 2011 
(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 секунды ... она удаляетclass из текущего элемента, возвращается к первому элементу, если мы в данный момент на последнем, и затем добавляет класс к целевому элементу.

Посмотреть демонстрацию здесь

...