Задание цвета элементу списка с задержкой.
Добрый день уважаемые. Вот возникла необходимость в реализации следующего цикла.
Каждую секунду происходит замена цвета элементов строки списка, при этом на следующую секунду предшествующее значение класса предыдущего элемента убирается. Цикл бесконечен.
<ul id="list">
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
$(function(){
$("#list li").each( function (){
setTimeout(function () {
$(this).css("color", "green")
}, 1000);
});
});
Подскажите, как такое реализовать. Мой JS не хочет почему-то задавать задержку. |
this в setTimeout(function () работать не будет, точнее будет возвращать совсем не то что ты хочешь.
|
jQuery(function ($) {
$('#list > li').each(function (i, el) {
setTimeout(function () {
el.style.color = 'green';
}, 1000);
});
});
this |
Эмм чёт не понятно оно работает https://jsfiddle.net/BlackStar1991/ogkbtse2/
Оно ждет 3сек, и закрашивает все элементы списка разом(. Не то |
Black_Star,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var item = $("#list li"), indx = -1, len = item.length;
(function go()
{
item.eq(indx).css("color", "")
indx = ++indx % len;
item.eq(indx).css("color", "green")
setTimeout(go,1000)
}())
});
</script>
</head>
<body>
<ul id="list">
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
</body>
</html>
|
Цитата:
jQuery(function ($) {
$('#list > li').each(function (i, el) {
setTimeout(function () {
el.style.color = 'green';
}, i * 1000);
});
});
|
dd_smol,
Цитата:
|
Ooops, Не внимательный я ... не стал читать пост до конца а полез смотреть код увидел проблемы и сделал свой вывод об ошибки на ней и заострил внимание. Прошу прошение что начал водить в заблуждение. :)
|
| Часовой пояс GMT +3, время: 23:44. |