Менять класс DIV каждую X секунду, а не только 1, но с несколькими классами

Question

Менять класс DIV каждую X секунду, а не только 1, но с несколькими классами

0

Я уже видел этот код и знаю, как он работает

Ссылка: используйте jquery для переключения класса на 1 секунду каждые 5 секунд.

Но как бы вы это сделали с несколькими классами?.

Например,

первые 5 секунд добавят "CLASS1"
следующие 5 секунд добавят "CLASS2"
и следующие 5 секунд добавят "CLASS3"
а затем повторите это после того, как все будет сделано.

Я знаю только немного jQuery и все еще учась. Любая помощь будет оценена по достоинству.

Shiro 22 март 2014, в 16:14

Источник

Теги:

jquery

3 ответа

0

setInterval(function(){ 
   // toggle the class every five second
   $('#donate').toggleClass('wiggle');  
   setTimeout(function(){
     // toggle back after 1 second
     $('#donate').toggleClass('wiggle');  
   },1000);
},5000);

демонстрация

Muhammad Tahir 22 сен. 2015, в 08:56

0

Еще одно усилие:

Демо: JSFIddle

JS

$(function(){
    var timer, i=1;
    timer = setInterval(function(){
        if (i > 3) i = 1;
        $('#addme').addClass("class"+i);
        $('#addme').append("<br>added class"+i);
        i++;
    }, 5000);
});

HTML:

<div id="addme">Add multiple classes here...</div>

lshettyl 22 март 2014, в 13:04

Ещё вопросы

Charlie · Accepted Answer · 2014-03-22T11-54-00.000Z

Чтобы изменить класс каждые x секунд, вы должны использовать setInterval:

var counter = 1;
var int = setInterval(function(){
    $("div").attr("class", "class" + counter);
    if (counter === 3){
        counter = 1; // If counter = 3, set it back to 1 for next loop
    } else {
        counter++; // Else, add 1 to the counter
    }
}, 5000);

пример

Если вы хотите, чтобы функция не запускалась после x итераций, вы можете настроить второй счетчик, а затем использовать clearInterval(int) чтобы программно завершить его.

@ Широ Я рад, что это сработало, но ты понимаешь, как это работает? Гораздо лучше понять код, чем просто слепо его использовать (по крайней мере, это то, что я узнал).
Не могу сказать, что на самом деле я все понимаю. Все, что я знаю сейчас, это то, что каждые 5 секунд «счетчик» добавляет +1 к нему, а затем применяет его к DIV. Я скоро изучу jQuery на CodeAcademy. Но мне просто нужно спросить об этом, потому что мне это сейчас нужно. Еще раз спасибо @Charlie! : D.