Autor Zpráva
Anonymny
Profil *
<style type="text/css">
	#box {width:100px; height:100px; background:black}
	</style>
	<script type="text/javascript">
	function animujBox() {
		document.getElementById("box");
		box.style.marginLeft="10px";
		box.style.marginLeft="11px";
		box.style.marginLeft="13px";
		box.style.marginLeft="14px";
		box.style.marginLeft="15px";
		box.style.marginLeft="16px";
	}
	</script>
</head>

<body>
	
	<div id="box"></div>
	<script>
	
	animujBox();
	
	</script>


Siel som na to logicky... ale nefunguje to... neviete preco?
Dakujem.

Moderátor Chamurappi: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
vynalezce
Profil
Anonymny:
Siel som na to logicky... ale nefunguje to... neviete preco?

Prostě to proběhne příliš rychle za sebou.
Použij funkci setInterval()
a
box.style.marginLeft=x+"px";
shooty
Profil *
To neprobehne příliš rychle za sebou. Ale probhne to v jednu dobu a platit bude jen box.style.marginLeft="16px";

musis takhle: setTimeout("box.style.marginLeft='15px'", '1000');

1000 (ms) = 1 sekunda
shooty
Profil *
priklad

function animujBox() {
var box = document.getElementById("box");
setTimeout("box.style.marginLeft='10px'", '100'); 
setTimeout("box.style.marginLeft='11px'", '200'); 
setTimeout("box.style.marginLeft='12px'", '300'); 
setTimeout("box.style.marginLeft='13px'", '400'); 
setTimeout("box.style.marginLeft='14px'", '500'); 
setTimeout("box.style.marginLeft='15px'", '600'); 
setTimeout("box.style.marginLeft='16px'", '700'); 
} 
vynalezce
Profil
Mám lepší nápad

function animujBox() {
var x=10;
var box = document.getElementById("box");
interval=setInterval("presun()",100);
}
function presun(){
box.style.marginLeft=x+"px";
if(x==16){
clearInterval(interval);
}
x++;
}
Matty
Profil
shooty:
Ale fuj. Co se ti nelíbí na řešení od vynalezce?
shooty
Profil *
Jenom jsem opravil slogan. Toť vše :)
Radek9
Profil
function animujBox(){
  px = 10;
  interval = setInterval(function(){
    box.style.marginLeft = px+"px";
    px++;
    if(px==16){
      clearInterval(interval);
    }
  }, 100);
}
Anonymny
Profil *
Hm.. zaujimave ale ani jedna moznost mi nefunguje :(
peta
Profil
http://peter-mlich.wz.cz/web/js/prjpw/index.html#cas
Jednoduchá animace jako Marquee

Takze to shrnu
1
document.getElementById("box");
box.style.marginLeft="10px"; // chyba 1, JS konzola vyhlasi error, ze promenna box nebyla definovana, protoze v predchozim radku to neukladas do promenne
2 v tom divu nic nemas, jak poznas, ze se to animuje? odkaz na stranku?
3 interval casovani nemas nikde definovany
4 margin funguje za specialnich podminek, ze nevytece z boxu do nadrazeneho. Testoval bych to nejdriv na padingu. Nebo nadrazenemu boxu musis dat ramecek. Coz v tom prikladu neni, takze se domnivam, ze to nemas ani ve sve verzi, na kterou jsi nedal link.
5 Jak jsi prisel zrovna na tuto konstrukci? Poradil ses s google?
_es
Profil
function animujBox(){
  var style = document.getElementById("box").style;
  var prve = 10;
  var posledne = 16;
  var krok = 1;
  var casKrok = 100;
  var i = prve;
  var interval =  setInterval(f, casKrok);
  function f(){
    if(i > posledne) clearInterval(interval);
    else style.marginLeft = i + "px", i += krok;
  }
}

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: