Циклическое изменение класса элемента?

Question

[gl_evhen]

Здравствуйте, подскажите пожалуйста скрипт или ключевые слова для его поиска, который мог бы менять элементу класс с одного на второй, спустя определенный промежуток времени.
К примеру элемент

<div class="first-class"> 
через минуту становиться
<div class="second-class"> ,
а ещё через минуту опять
<div class="first-class">

Answer 1

[Виталий Инчин ☢]

var arrD = ["first", "second", "yet"], i = -1; 
//Классы - .first, .second, .yet соотв.
setInterval(function(){
  document.querySelector("div").className = arrD[
    i = ++i%arrD.length
  ];
}, 60000);

Образец: jsfiddle.net/pofw0vLw/1

Comments

[gl_evhen]

Cпасибо, ваше решение помогло

[Aves]

можно ещёarrD[i++%arrD.length]

[gl_evhen]

только оно как-то немного не равномерно вроде бы работает, время действия класса first больше чем second

[gl_evhen]

убрал из массива yet и всё стало гуд, ещё раз спасибо =)

[Виталий Инчин ☢]

Aves: ок, я и забыл об этой чудесной записи

[Aves]

Не затирающая другие классы и способная начать цикл с имеющегося у элемента класса версия:

function cycleClass(element, list, time) {
    var i = -1;
    var c = element.classList;
    for (var n = 0; n < list.length; n++) {
        if (c.contains(list[n])) {
            if (i != -1) c.remove(list[i]);
            i = n;
        }
    }
    return setInterval(function () {
        c.remove(list[i++]);
        c.add(list[i %= list.length]);
    }, time);
}

jsfiddle.net/pofw0vLw/2

[Aleksandr]

Aves Виталий Инчин ☢ Подскажите пожалуйста, а как быть если элементов больше 1?

[Aves]

Александр Котов: просто выполнить cycleClass для каждого элемента - jsfiddle.net/pofw0vLw/4

[Aleksandr]

Aves: да разобрался ) спасибо

[Александр Токмаков]

А как сделать в этом примере плавную смену цвета, а то слишком резко?

[Виталий Инчин ☢]

Александр Токмаков, css transition

Answer 2

[Ivan Palamarchuk]

setInterval(function() {
if ($('div').hasClass('first-class')) {
$(this).removeClass('first-class').addClass('second-class');
} else if ($('div').hasClass('second-class')) {
$(this).removeClass('second-class').addClass('first-class');
}
}, 5000);

Comments

[gl_evhen]

Спасибо за отклик, что-то не меняет оно класс