Autor Zpráva
timeout
Profil *
Dobrý den,

snažím se po akci (onclick) zmenšovat plynule obrázek (přes setTimeout)
HTML:
<img id="obrazek" src="logo.png" style="height:109px;"><br>
<input type="button" value="Plynule zmenšit" onclick="skryj('obrazek')">


JS:
function skryj(co)
{
    setTimeout(krokAnimace(obr), 10);
}

function krokAnimace(element)
{
  return function()
  {
    element.style.height=element.style.height-1;
  };
}
ale bohužel nic nedělá, jsem začátečník takže si fakt nevím rady, mohl by mi prosím někdo pomoci?

PS: Vím že tam není ochrana jako pokud je výška již 0, tak aby to přestalo, ale zatím se mi jedná čistě o skrytí, takovéhle věci chci dodělat až to půjde.
Chamurappi
Profil
Reaguji na timeouta:
element.style.height=element.style.height-1;
Ta výška není obyčejné číslo. Při nastavování musíš zmínit pixely (pokud neužíváš quirk) a při zjišťování ti je tam prohlížeč dá stoprocentně. Rozdíl "109px" - 1 vychází NaN. Chceš asi tohle:
element.style.height = parseFloat(element.style.height) - 1 + "px";
Lopata
Profil
timeout:
a také ve funkci skryj() je hodnota proměnné obr undefined (jak to tak vypadá). Možá si myslel "co"...?
timeout
Profil *
Lopata:
Však tam je var obr=getElementByID(co); // ID obrázku z toho (co)

Chamurappi:
Velmi ti děkuji, jede to a teď jsem si i všiml, že místo setTimeout asi bude vhodnější použít setInterval, nebo ne? Pokud bych použil setTimeout musel bych použít for(), ale tam nevím jak řešit to s výškou - jestli je 0 stop atd. :(
Witiko
Profil
Například takhle?
Neozkoušeno, drycoded.

function skryj(co) {
    var interval = window.setInterval(
      function() {
        if(krokAnimace(document.getElementById(co))<=0) {
          window.clearInterval(interval);
         }
      }
    , 10);
}

function krokAnimace(element) {
  return parseFloat(element.style.height = String(parseFloat(element.style.height) - 1) + "px");
}
timeout
Profil *
Witiko:
Například takhle?
Nefunguje
timeout
Profil *
Jinak, zkoušel jsem něco skrýt a až pak zobrazit, ale nevím jak na to:(
<script>
function zobrazit(co, com)
{
  var obr = document.getElementById(co);
  var obsah = document.getElementById(com);
    var intervals=setInterval(krokAnimaces(obr), 1);
    var intervalz=setInterval(krokAnimacez(obsah), 1);
}

function krokAnimaces(element)
{
  return function()
  {
    element.style.height = parseFloat(element.style.height) - 1 + "px";
  };
}
function krokAnimacez(element)
{
  return function()
  {
    element.style.height = parseFloat(element.style.height) + 1 + "px";
  };
}
</script>
<img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.png" style="height:109px;width:493px;"><br>
<input type="button" value="Plynule zobrazit" onclick="zobrazit('obrazek', 'obsah')">
<div id="obsah" style="height:0px;background:black;width:200px;">
</div>

krokAnimacez(zobrazit div obsah) bych chtěl spustit až bude mít obrázek výšku 0. :(

Ať googlím jak googlím nic nevidím :(
Witiko
Profil
Říkal jsem, že to je drycoded. Malý přepis (jedna závorka navíc). Script nahoře updatován, otestováno - funkční.
Witiko
Profil
<img id="obrazek" src="logo.png" style="height:109px;"><br>
<input type="button" value="Plynule zmenšit" onclick="skryj('obrazek', 'obrazek')">
<script type="text/javascript">
function skryj(element1, element2) {
    var interval1 = window.setInterval(
      function() {
        if(krokAnimace_zmenseni(document.getElementById(element1)) <= 0) {
          window.clearInterval(interval1);
          var interval2  = window.setInterval(
            function() {
              if(krokAnimace_zvetseni(document.getElementById(element2)) >= 100) {
                window.clearInterval(interval2);
               }
            }
          , 10);
         }
      }
    , 10);
}

function krokAnimace_zmenseni(element) {
  return parseFloat(element.style.height = String(parseFloat(element.style.height) - 1) + "px");
}

function krokAnimace_zvetseni(element) {
  return parseFloat(element.style.height = String(parseFloat(element.style.height) + 1) + "px");
}
</script>

timeout:
Například nějak takhle? Po zmenšení elementu jedna se zvětší element dva (hodil jsem tam na 100 pixelů).

Ať googlím jak googlím nic nevidím :(
Co se třeba snažit se trochu porozumět kódu? Ten kód nahoře je příkladový (netuším k čemu bude script použitý, jinak bych dost možná funkci pozměnil spolu se způsobem předávání argumentů) , nehodlám tu házet pro každou mírnou změnu funkce script nový, očekávám trochu snahu do scriptu proniknout, při chybách použít debugger, ne jen bezhlavé kopírování kódu.
timeout
Profil *
Witiko:
chybách použít debugger, ne jen bezhlavé kopírování kódu.
Debugger? Neznám, ale vygooglím, dík.

Jinak funkci jsem se snažil porozumět, něčemu rozumím víc, něčemu méně, ale nechápu proč nejde toto ->
<script>
function zobrazit(co,com) {
    var vyska=document.getElementByID("obsah").style.height;
    var intervals = window.setInterval(
      function() {
        if(krokAnimaces(document.getElementById(co))<=0) {
          window.clearInterval(intervals);
          document.obsah.style.height=0;
          document.obsah.style.display='block';
          var intervalz = window.setInterval(function() {if(krokAnimacez(document.getElementById(com))>=vyska) {window.clearInterval(intervalz);}}, 1);
         }
      }
    , 1);
}

function krokAnimaces(element) {
  return parseFloat(element.style.height = String(parseFloat(element.style.height) - 1) + "px");
}
function krokAnimacez(element) {
  return parseFloat(element.style.height = String(parseFloat(element.style.height) + 1) + "px");
}
</script>
<img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.png" style="height:109px;width:493px;"><br>
<input type="button" value="Plynule zobrazit" onclick="zobrazit('obrazek', 'obsah')">
<div id="obsah" style="height:200px;background:black;width:200px;display:none;">
</div>

<- Chtěl jsem aby až po zajetí loga se vysunul obsah (nahoře zjišťuju výšku pro další použití, ale stále to nefunguje, a to jsem to napsal 2× kdybych náhodou někde udělal chybu.

Jinak já vím, že otravuju, je mi to fakt líto, omlouvám se, ale bohužel si s tím nevím rady :(
Witiko
Profil
Debugger je v prohlížečích většinou i zabudovaný, v IE pod Nástroje -> Nástroje pro vývojáře.
Jinak důvod proč to nefunguje? Co má být document.obsah? document.obsah odkazuje na neexistující formulář s name obsah. Navíc funkce document.getElementByID neexistuje, document.getElementById ano.

Asi jsi zamýšlel něco takovéhleho?

...
    var obrazek=document.getElementById(co);
    var obsah=document.getElementById(com);
    var vyska=obsah.style.height;
    var intervals = window.setInterval(
      function() {
        if(krokAnimaces(obrazek)<=0) {
          window.clearInterval(intervals);
          obsah.style.height=0;
          obsah.style.display='block';
           var intervalz = window.setInterval(function() {
             if(krokAnimacez(obsah)>=vyska){
               window.clearInterval(intervalz);
              }
            }, 1);
...



Nastavovat interval na 1 je hloupost a zbytečné přetěžování prohlížeče. Chceš 25 FPS? 1000 / 25 = 40, voila.
_es
Profil
timeout:
<img id="obrazek" src="logo.png"><br>
<input type="button" value="Plynule zmenšit" onclick="skryj('obrazek')">
<script>
function skryj(co){
  var img = document.getElementById(co);
  var i = setInterval(f, 50);
  function f(){ if(!--img.height) clearInterval(i);}
}
</script>

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: