Применить цвет на основе задержки

У меня есть набор li, и я хочу установить цвет фона для каждого li после задержки между каждым li.Применить цвет на основе задержки

ex: если 1 ли цвет окрашен в красный цвет, то после некоторой задержки (800) текущий цветной литий должен быть удален, а следующий li должен быть окрашен, должен продолжаться для остальных.

HTML

<ul> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li>list item 3</li> 
    <li>list item 4</li> 
    <li>list item 5</li> 
    </ul>

JQuery

$('ul').each(function(i, j){ 
    $(this).eq(i).css('background-color', 'red').delay(1000).removeAttr('style'); 
});

DEMO

Пожалуйста, поправьте меня, где я ошибаюсь.

источник

2013-07-22 RAVI MONE

Вы можете сделать что-то подобное.

var $li = $('ul li'); 

$li.each(function(i, li) { 
    var that = $(this); 

    setTimeout(function() { 
     $li.removeAttr('style'); 

     that.css('background-color', 'red'); 
    }, i * 800); 
});

JSFiddle

источник

2013-07-22 06:04:54

эй, это работает хорошо :), но я был только гадать, это может быть сделано с помощью .delay и еще оптимизированный код, Вы можете, пожалуйста, покажите мне это можно сделать без использования setTimeout. –

Да, конечно, один момент. Метод, который я опубликовал выше, - это то, что впервые появилось на ум. –

Редактировать - это невозможно с '.delay()'. '.delay() 'работает только для методов на основе очередей, таких как анимации, а не' css() 'или' removeAttr() '. Кроме того, нет ничего плохого в использовании 'setTimeout()', так как это то, что jQuery использует внутри с 'delay()'. –

Вы перебираете все ui элементов, когда я думаю, что вы хотите перебрать все li элементов
Внутри итерации $(this) будет относиться к элементу на текущий индекс, поэтому нет необходимости использовать - или, скорее, вы не можете использовать - eq(i) здесь. $(this).css(...) будет достаточно.
.removeAttr не является анимацией. Он не использует очередь эффектов, и поэтому она не может быть отложена таким образом. Используйте setTimeout.
Исправив все вышесказанное, вы все равно должны заметить, что итерация будет проходить через все элементы очень быстро. Установленный тайм-аут должен учитывать это каким-либо образом, например. i*1000или ваш тайм-аут должен вызывать себя рекурсивно и продвигать петлю таким образом, но это повлечет за собой довольно полную переписывание.

Пример:

function highlight(list, index) { 
    list.removeAttr('style').eq(index%list.length).css('background-color', 'red'); 
    setTimeout(highlight, 1000, list, ++index); 
}

Demo

источник

2013-07-22 06:07:07

Вы можете попробовать это http://jsfiddle.net/fpYdt/8/:

HTML:

<ul> 
    <li class="red">list item 1</li> 
    <li>list item 2</li> 
    <li>list item 3</li> 
    <li>list item 4</li> 
    <li>list item 5</li> 
</ul>

Добавлен CSS:

.red {background-color:red}

JQuery:

$(document).ready(function() { 
    setInterval(function(){ 
     var red = $('li.red'); 
     red.removeClass('red'); 
     var next = red.next(); 
     if(next.length > 0)    
      red.next().addClass('red'); 
     else 
      $('li').first().addClass('red'); 
    },3000); 
});

источник

2013-07-22 06:11:46 gregjer

Применить цвет на основе задержки

ответ

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