• User

    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? :smile5:


  • User

    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! :gthi: