[JavaScript] zmiana css dzieci dla kazdego inne opóźnienie Opcje

[pakolord]

witam,

jak zrobić aby zmiana css była opóźniona w czasie dla każdego elementu np.

li:eq(1) zmiana tła po 1 sek.
li:eq(2) zmiana tła po 2 sek.
li:eq(3) zmiana tła po 3 sek.
... itd.

próbuje tak ale chyba idę zła drogą:

[XML] pobierz, plaintext 
var x = ('li').length;
var y = 0;
 
for(x, y; y<x; y++)
{
	setTimeout(function(){
 
		$('li:eq('+ y +')').css('background', 'blue');
 
	}, y * 1000);
}
[XML] pobierz, plaintext 

Ten post edytował pakolord 24.03.2018, 18:08:10

[SmokAnalog]

Można w czystym CSS, ale to różne opóźnienie dla poszczególnych <li> byłoby upierdliwe do osiągnięcia, zwłaszcza jeżeli nie wiadomo z góry ile elementów będzie na liście.

Wersja jQuery:

[JAVASCRIPT] pobierz, plaintext 
$('li').each(function (index) {
    setTimeout(function (li) {
        $(li).css('background', 'blue');
    }, index * 1000, this);
});
[JAVASCRIPT] pobierz, plaintext 

Wersja JavaScript :

[JAVASCRIPT] pobierz, plaintext 
document.querySelectorAll('li').forEach((li, index) => {
    setTimeout(() => {li.style.background = 'blue';}, index * 1000);
});
[JAVASCRIPT] pobierz, plaintext 

P.S. Znalazłem bug na forum. Tekst "JavaScript :" bez spacji przed dwukropkiem zostaje zamieniony na "java script:" (IMG:style_emoticons/default/biggrin.gif) Musiałem więc dać spację przed dwukropkiem. Wiem, to straszne.

Ten post edytował SmokAnalog 24.03.2018, 18:34:39