- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Semplice animazione non funziona
-
Semplice animazione non funziona
Ho scritto un codice di test per capire dov'è che sbaglio nella realizzazione di un'animazione all'interno di un mio script.
<div id="box" style="background: #FF0000; height: 200px; width: 200px;"></div> <script type="text/javascript"> var timeline = 100 var l = 0 while (l < 300) { l = l + 1 var t =setTimeout(document.write("test <br />"), timeline) timeline = timeline + 100 } </script>
Quello che voglio ottenere qui è che il box si sposti lentamente verso destra fino a fermarsi a 300px dal limite sinistro della pagina.
Il risultato però è diverso. Il box comprare per un appena percettibile istante tutto a sinistra, ma un attimo dopo si sposta 300px più a destra in un colpo solo, senza animazione.
Dove sbaglio?
-
Risolto! Ho riscritto tante volte il codice ogni volt ain un modo diverso, non riuscendo a capire perché non funzionasse. Poi ho "scoperto" che servono gli apici intorno al primo argomento di setTimeout
Ad ogni modo questa qui funge e può essere riadattata per ottenere qualsiasi effetto di transizione. Se serve...
<div id="box" style="background: #FF0000; height: 200px; width: 200px;"></div> <script type="text/javascript"> var time = 20 var l = 0 function slidelabel() { l += 1 //time += 10 document.getElementById('box').style.marginLeft = l + 'px' //alert(document.getElementById('box').style.marginLeft) if (l < 300) var t = setTimeout("slidelabel()", time) else clearTimeout(t) } slidelabel()</script>
Ciao!