Come alternare la classe di elementi in sequenza?

Question

Sto provando a fare in modo che la classe di ogni elemento cambi automaticamente una alla volta in sequenza. Ciò significa che l'elemento 1 si illumina e quindi si spegne quando l'elemento 2 si illumina e quindi si spegne e così via. Quando ogni elemento è illuminato una volta inizia l'intera sequenza.

$('header div:first').toggleClass('highlight').nextAll().toggleClass('none'); 
 

 
function highlight() { 
 
    var $off = $('header div.highlight').toggleClass('none'); 
 

 
    if ($off.next().length) { 
 
    $off.next().toggleClass('none'); 
 
    } else { 
 
    $off.prevAll().last().toggleClass('highlight'); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    setInterval(highlight, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
<div>element 1</div> 
 
<div>element 2</div> 
 
<div>element 3</div> 
 
<div>element 4</div> 
 
</header>

non funzionerà come previsto (elementi da 2 a 4 clou tutto allo stesso tempo e poi andare via mentre l'elemento 1 cambio pretende molto a tutti) e non so perché. Che cosa sto facendo di sbagliato?

Answer 1

Quindi sì, non c'è bisogno del .none. Basta usare gli stili predefiniti e la classe .highlight.
Prendi il numero di elementi, creare un ounter c, incrementarlo e loop usando % Promemoria Operatore:

jQuery(function($) { // DOM is ready 
 

 
    var $el = $("header>div"), tot = $el.length, c = 0; 
 

 
    $el.eq(c).addClass("highlight"); // initial highlight 
 

 
    setInterval(function() { 
 
    $el.removeClass("highlight").eq(++c%tot).addClass("highlight"); 
 
    }, 1000); 
 

 
});

header > div   { transition:0.5s; -webkit-transition:0.5s; } 
 
header > div.highlight { color:#f0f; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
<div>element 1</div> 
 
<div>element 2</div> 
 
<div>element 3</div> 
 
<div>element 4</div> 
 
</header>

alcuni documenti:
https://api.jquery.com/eq/
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()

Answer 2

Soluzione:

Change .none da .highlight, in questo modo:

$('header div:first').toggleClass('highlight'); 
 

 
function highlight() { 
 
    var $off = $('header div.highlight').toggleClass('highlight'); 
 

 
    if ($off.next().length) { 
 
    $off.next().toggleClass('highlight'); 
 
    } else { 
 
    $off.prevAll().last().toggleClass('highlight'); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    setInterval(highlight, 1000); 
 
});

.highlight { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
<div>element 1</div> 
 
<div>element 2</div> 
 
<div>element 3</div> 
 
<div>element 4</div> 
 
</header>

Altri modi:

$('header div:first').toggleClass('highlight'); 
 

 
setInterval(function() { 
 
    var abc = "highlight"; 
 
     $off = $('header div.' + abc), 
 
     $next = $off.next().length ? $off.next() : $off.prevAll().last(); 
 

 
    $off.toggleClass(abc); 
 
    $next.toggleClass(abc); 
 
}, 1000);

.highlight { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
<div>element 1</div> 
 
<div>element 2</div> 
 
<div>element 3</div> 
 
<div>element 4</div> 
 
</header>

Answer 3

La classe none insieme alle chiamate toggleClass() può essere un po 'di confusione da leggere. Si può essere meglio, semplicemente tenendo traccia del vostro elemento evidenziato corrente tramite div.highlight e determinare quali uno a bersaglio successivo utilizzando il codice aggiornato di seguito:

function highlight() { 
    // Remove the highlight from all options 
    var $current = $('div.highlight'); 
    // Store the next one 
    var $next = $current.next('div'); 
    // Remove all highlighting 
    $('div.highlight').removeClass('highlight') 
    if($next.length){ 
     $next.addClass('highlight'); 
    } else { 
     $('header div:first').addClass('highlight'); 
    } 
} 
// When the document is ready 
$(function() { 
    // Initially set your first element as highlighted and start your interval 
    $('header div:first').addClass('highlight'); 
    setInterval(highlight, 1000); 
}); 

Esempio

È possibile see an example of this in action here e dimostrato di seguito:

immagine è solo a scopo illustrativo e tempi possono a ppear diverso da codice vero e proprio esecuzione ...:)

Answer 4

È potrei provare questo approccio

Javascript

var highlight = function(){ 
$('header div').removeClass('highlight'); 
$('header div').each(function(i,v) { 
setTimeout(function(){$(v).prev().toggleClass('highlight');$(v).toggleClass('highlight');}, i*1000); 
}); 
setTimeout(highlight, ($('header div').length)*1000); 
}; 
highlight(); 

Fiddle