Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] zmiana css dzieci dla kazdego inne opóźnienie
pakolord
post 24.03.2018, 18:07:01
Post #1





Grupa: Zarejestrowani
Postów: 82
Pomógł: 0
Dołączył: 27.02.2014

Ostrzeżenie: (0%)
-----

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 
  1. var x = ('li').length;
  2. var y = 0;
  3.  
  4. for(x, y; y<x; y++)
  5. {
  6. 	setTimeout(function(){
  7.  
  8. 		$('li:eq('+ y +')').css('background', 'blue');
  9.  
  10. 	}, y * 1000);
  11. }
[XML] pobierz, plaintext


Ten post edytował pakolord 24.03.2018, 18:08:10
Go to the top of the page
+Quote Post
trueblue
post 24.03.2018, 18:09:58
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Sprawdź pierwszą linię.

Selectory w CSS zaczynają się od 1.
Możesz też to zrobić w czystym CSS.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
pakolord
post 24.03.2018, 18:12:58
Post #3





Grupa: Zarejestrowani
Postów: 82
Pomógł: 0
Dołączył: 27.02.2014

Ostrzeżenie: (0%)
-----

nic to nie zmienia tongue.gif

jak robię tak jak napisałem czy od 0 czy 1 to style mi się zmieniają tylko dla pierwszego elementu.

w css więcej pisania, chciałem zrobić pętle w js dla ograniczania kodu.

Ten post edytował pakolord 24.03.2018, 18:14:00
Go to the top of the page
+Quote Post
SmokAnalog
post 24.03.2018, 18:31:11
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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 
  1. $('li').each(function (index) {
  2.     setTimeout(function (li) {
  3.         $(li).css('background', 'blue');
  4.     }, index * 1000, this);
  5. });
[JAVASCRIPT] pobierz, plaintext


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


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

Ten post edytował SmokAnalog 24.03.2018, 18:34:39
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 20.04.2024 - 04:49
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn