функция задержки jQuery - PullRequest
Новая
       40

функция задержки jQuery

1 голос
/ 21 марта 2011

У меня есть представление о том, как я могу это сделать, но я действительно могу использовать «оптимизатор», чтобы сказать мне, что делать, так что все сделано правильно.

Это моя разметка: 

<span class="darkmark">
  <em class="active rnr">RR</em>
  <em class="apple">Apple Enthusiast</em>
  <em class="glasses">Glasses Wearer</em>
  <em class="html5">HTML5 User</em>
  <em class="wine">Wine Drinker</em>
</span>

Это просто список маленьких иконок, которые я хочу перебирать в заголовке в личном размере.Милый, верно?

Я бы хотел, чтобы каждые 5 секунд активный класс переходил к следующему брату.После того как все они пройдут цикл, он возвращается к первому, и процесс продолжается до бесконечности.

Просто не знаю, как мне это сделать.Я не хочу, чтобы какое-либо взаимодействие с пользователем вызывало его (без наведения / щелчка мышью) только после загрузки страницы, когда они начинают циклически повторяться.

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

Ответы [ 3 ]

3 голосов
/ 21 марта 2011

Один или два дня назад был очень похожий вопрос, хотя я не могу его найти сейчас.Решение, которое я разместил, выглядело так: 

var rotateSiblings = function() {
    var cur = $('.active');                    // find current "active", if any
    var next = $(cur).next();                  // find its next sibling
    if (next.length == 0) {                    // if there wasn't one...
        next = $('.darkmark').children().first(); // take the first one from the span
    }

    $(cur).removeClass('active');              // remove "active" from the current one
    $(next).addClass('active');                // and add it to the next one
}

setInterval(rotateSiblings, 5000);             // and do it all over every 5 seconds

РЕДАКТИРОВАТЬ - этот код был изменен с момента первой публикации.Рабочая демоверсия на http://jsfiddle.net/raybellis/UHWfC/

1 голос
/ 21 марта 2011

См. Пример 

var darkmarkRotate = function () {
    var $this = $('.darkmark'),
        $em = $this.find('em'),
        $active = $this.find('em.active'),
        $next = ($active.next('em').length) ? $active.next('em') : $em.first();

    $active.fadeOut(500);
    $next.delay(500).fadeIn(500);

    setTimeout(function() {
        $active.removeClass('active');
        $next.addClass('active');
    }, 1000);

    setTimeout(darkmarkRotate, 5000);
};

darkmarkRotate();
1 голос
/ 21 марта 2011

Попробуйте что-то вроде этого: 

function change_active() {
    var elements = $('.darkmark em');
    var count = elements.length;
    var active = $('.darkmark em.active');
    var next = (active.index() + 1) % count;
    active.removeClass('active');
    $(elements.get(next)).addClass('active');
}
setInterval(change_active, 5000);

Посмотрите, как это работает здесь .

...