Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Płynnie pokazywanie tekstu z opóźnieniem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mati251195
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 sad.gif
Z góry dziękuję za pomoc!
kamil4u
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 smile.gif, ale spróbuj samemu.

Pozdrawiam

PS. Dokumentacja JS to "mdc nazwaFunkcji"
mati251195
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ę sad.gif
kamil4u
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>
mati251195
Bardzo dziękuję, wszystko wyśmienicie działa smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.