Autor Zpráva
Camo
Profil
Zdravým!
Môže sa mi na toto niekto pozrieť?

Chcem spraviť otváracie menu, ale tak aby sa otváralo postupne. Teda mám div/menu s výškou 0px. Po kliknutí na odkaz, by sa mala spustiť funkcia open(), ktorá každú desatinu sekundy pridá k height 1px. No mne to samozrejme nefunguje.
<a href="#" onclick="open()">menu</a>
<div id="menu" style="height:0px; width:800px">
</div>

  <script type="text/javascript">

  var i=1;
  function open()
			{

					while(i<=150)
					{
					setInterval("grow()",100);
					}
               function grow()
                      {
					          document.getElementById('menu').style.height="i+px";
                                                  i++;
							 }
			 }
			 
  </script>
  <style>
Chamurappi
Profil
Reaguji na Cama:
Vždy dávej odkaz na živou ukázku. (Případně s varováním, že zasekne prohlížeč.)
Teď jsem se chtěl rozepsat o jednom nedostatku v kódu a vidím, že jich tam jsou mraky. Pochybuji, že má smysl ti je vysvětlovat.

1) Smyčka while na řádku 11 je nekonečná, protože hodnotu „i“ v ní nic nezmění.
2) Snažíš se stopadesátkrát nastavit, aby se každých 100 milisekund volalo „grow()“? Tedy, aby se to každou desetinu sekundy volalo stopadesátkrát?
3) Funkci „grow“ máš uvnitř funkce „open“, takže nejde volat zvenčí. Jelikož dáváš do setIntevalu jako první argument řetězec, zpracovává se načasovaná akce v globálním kontextu a tam „grow“ neexistuje.
_es
Profil
Camo:
Takže "správna" verzia by mala byť:
  function open()
            {

                    while(i<=150)
                    {
                    setInterval(grow,100);
                    }
               function grow()
                      {
                              document.getElementById('menu').style.height = i + "px";
                                                  i++;
                             }
             }

Je to opravené len syntakticky, inak je to nezmysel, lebo sa to bude pokúšať asi 1500 krát za sekundu zmeniť štýl toho prvku.
Camo
Profil
es:
Prečo ,,správna,,?

No ale expanzia premennej predsa umožňuje napísať style="i+px"? Či som zase mimo?

Chamurappi:

1-a kam mám i++ umiestniť veď grow() je súčasť while. Ale dobre chápem, že nechápem. Keby k tej grow pridám return i++ tak to nevyriešim?
2-to asi súvisí s bodom jedna, nie????
3-vnorená funkcia v globálnom kontexte?????

No a ako to riešia normálni programátori?
_es
Profil
Camo:
No ale expanzia premennej predsa umožňuje napísať style="i+px"?

Reťazec "i+px" je len reťazec "i+px", nič iné, teda tam sú len presne tie štyri znaky.

Chamurappi sa ti asi snažil vysvetliť, že ak do setInterval zadáš reťazec, tak sa z toho reťazca vytvorí akási skrytá globálna funkcia, ktorá samozrejme "nevidí" funkciu grow.

Ak som dobre odhadol, čo chceš, tak naozaj správny kód by mal byť:
<a href="#" onclick="open2();">menu</a>
<div id="menu" style="height:0px; width:800px">
</div>
<div>---</div>
<script>
function open2() {
  var i=1;
  var t = setInterval(grow,100);
  var s = document.getElementById('menu').style;
  return false;
  function grow() {
    s.height = i + "px";
    i++;
    if(i>=150) clearInterval(t);
  }
}
</script>
Camo
Profil
No s pomocou ľudí z pcfora som sa dopracoval k funkčnému tomuto.
<script type="text/javascript">
var i = 0;

function odroluj() {
document.getElementById('menu').style.height = i + "px";
i++;
if(i >= 150)
return;
setTimeout("odroluj()", 10);

}
</script>
</head>
  <body>
<a href="#" onclick="odroluj()">menu</a>
<div id="menu" style="height:0px; width:800px; background: black;"></div>

  </body>


_es:
Ten tvoj script nefunguje. Nevieš prečo, keď to porovnáš? Nebude chyba predsa len v tom setInterva(grow,20);? Ja by som to totiž potreboval pochopiť. Teda už to chápem, ale všetky tie alternatívy nie.
_es
Profil
Camo:
Ten tvoj script nefunguje.

Mne to funguje, tie tri pomlčky sa začnú pomaly posúvať dole, potom zastanú.
Camo
Profil
Áno sorry, asi som krátko čakal než sa to spustí.
Ešte jedna otázočka. Ten zápis setInterva(grow,20) je korektný? Keď ja som taká lama, tak preto sa pýtam. Či to neni nejaký neštandardný zápis, ktorý nebude všade fungovať?
_es
Profil
Camo:
Ten zápis setInterval(grow,20) je korektný?

Áno, je úplne korektný a keď v tom kóde klikneš na to kľúčové slovo, zobrazí sa ti dokumentácia k príkazu.
A hlavne pri takýchto animáciách je výhodnejší ako variant s reťazcom, lebo to je rýchlejšie.

Nepomenúvaj globálne funkcie rovnakým názvom ako už existujúce funkcie (open), lebo nektoré prehliadače ti to nepovolia a potom skript nebude fungovať.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: