jquery синхронизированное изменение класса элемента

Question

Можно ли изменить класс предметов или идентификатор на основе какого-либо типа таймера? Каждые 1500 мсек он будет переходить в эй-там-1, затем через 1500 мсек через эй-там-2 ... и т. Д., Что я мог бы контролировать, через сколько интервалов он проходит ..

• эй-есть
• эй-там-1
• эй-там-2
• Эй-там-3
• (назад к началу) эй-там
• и т.д.

Спасибо

Answer 1

Функция плагина как таковая позволит вам делать то, что вы хотите:

jQuery.fn.rotateClasses = function(classes, interval, max) {
    var currentRotation = 0;
    var timer = null;

    var rotateFn = (function() {
            var currentClass = currentRotation % classes.length;

        var previousClass = currentClass - 1;
        if(previousClass == -1) previousClass = classes.length - 1;

        this.addClass(classes[currentClass]).removeClass(classes[previousClass]);

        currentRotation += 1;

            if(max > 0 && currentRotation >= max) clearInterval(timer);
    })();

    timer = setInterval(rotateFn, interval);

    return this;
};

Тогда вы можете просто позвонить, используя следующее:

$('#mydiv').rotateClasses(["class1", "class2", "class3"], 1000, 20);

Просто измените параметры по своему желанию. Первый параметр - это массив классов, которые нужно повернуть, второй - это интервал, на который их нужно повернуть, а третий - максимальное количество итераций. Если установлено значение 0, оно повторяется до бесконечности.

Answer 2

Я бы посоветовал не менять идентификатор элемента - вместо этого перейдите к классам "frame1 / frame2 / frame3".

$(function() {
  var $target = $("#hey-there");
  var classes = ['frame0', 'frame1', 'frame2', 'frame3'];
  var current = 0;

  setInterval(function() {
    $target.removeClass(classes[current]);
    current = (current+1)%classes.length;
    $target.addClass(classes[current]);
  }, 1500); // 1500 ms loop
});

Answer 3

См:

setTiemOut
setInternal

var pp = 0;

jQuery("#id").html(jQuery("#id").html() + "<div>hey there"+(pp++)+"</div>");