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

Question

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

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

<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 секунд или около того. После того, как все em были циклически пройдены, он возвращается к первому, и процесс продолжается бесконечно.

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

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

Answer 1

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

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 

EDIT - этот код был изменен с момента первого опубликования. Работа демо на http://jsfiddle.net/raybellis/UHWfC/

Answer 2

попробовать что-то вроде этого:

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); 

Посмотрите на это работает here.

Answer 3

See example

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();