Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Płynnie pokazywanie tekstu z opóźnieniem
mati251195
post
Post #1





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 25.07.2012

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


Witam,
Mam taką prostą funkcję w JavaScripcie, która pokazuje napisy:
  1. <script language='javaScript'>
  2. function rozpocznij(max) {
  3. var nr;
  4. for (nr = 1; nr <= max; ++nr) {
  5. document.getElementById(nr).style.display='block';
  6. }
  7. }

Mam dużą ilość divów (ponad 2000) i każdemu kolejnemu nadałem inny nr ID. Za pomocą tej funkcji ich styl się zmienia i stają się widoczne. To jednak dzieje się w jednym momencie, a ja chciałbym, aby pokazywanie tekstu było płynne i aby każdy kolejny napis pokazywał się 50 milisekund po kolejnym. To z tym płynnym to wiem, że można użyć FadeIn, ale szukałem i nie mogę znaleźć tych pauz po kolejnym wykonaniu się pętli (IMG:style_emoticons/default/sad.gif)
Z góry dziękuję za pomoc!
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 4)
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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


Użyj setInterval, w ogóle nie używając pętli. Do tego zmienna globalna i clearInterval.

W sumie nic więcej napisać tu nie trzeba. Nie wiem na jakim poziomie jesteś. Jeśli powyższe Ci nie wystarczy to prawdopodobnie będę zmuszony napisać gotowca (IMG:style_emoticons/default/smile.gif) , ale spróbuj samemu.

Pozdrawiam

PS. Dokumentacja JS to "mdc nazwaFunkcji"
Go to the top of the page
+Quote Post
mati251195
post
Post #3





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 25.07.2012

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


W JS jestem na poziomie praktycznie 0, więc jednak jakbyś był taki miły, to bym prosił o jakiś kodzik, bo sam tego nie napiszę (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
kamil4u
post
Post #4





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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


Pisane na szybko, ale działa:

Kod
<style>div{ display: none; } </style>

<div id="t1">1</div>
<div id="t2">2</div>
<div id="t3">3</div>
<div id="t4">4</div>
<div id="t5">5</div>
<div id="t6">6</div>
<div id="t7">7</div>
<div id="t8">8</div>
<div id="t9">9</div>
<div id="t10">10</div>
<div id="t11">11</div>
<div id="t12">12</div>
<div id="t13">13</div>
<div id="t14">14</div>
<div id="t15">15</div>


<script>
function nazwa( i ){
  var j = 0;
  var test = setInterval(function(){
    if( ++j != i+1 )
     document.getElementById('t'+j).style.display = 'block';
    else
     clearInterval( test );
  }, 50);
}

nazwa( 15 );
</script>


Ten post edytował kamil4u 11.03.2013, 00:17:06
Go to the top of the page
+Quote Post
mati251195
post
Post #5





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 25.07.2012

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


Bardzo dziękuję, wszystko wyśmienicie działa (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 28.09.2025 - 01:34