rallentare lo spostamento di un immagine

[cuinie]

Ciao a tutti!

Ho fatto uno script che mi permette di spostere delle immagini dal bordo destro verso il bordo sinistro.
Però lo spostamento avviene troppo velocemente e non è visibile, come posso fare per rallentare lo spostamento in modo da visualizzare l'immagine in movimento?
Il codice che ho scritto è il seguente:

function gc(type){
    str="carta"+num_c;     
    el=document.getElementById(str);
    el.src=imgg[seme][num];
    el.style.visibility='visible';
    imgg[seme][num]="null";
    
   //type differenzia le carte che vanno sopra da quelle che vanno sotto
        if(type==1){
            el.style.top='50px';
            //position inizialmente vale 100
            position=bp;
        }
        else{
            el.style.top='350px';
            position=pp;
        }
            //sposto la carta

        x=parseInt(el.style.left);
        i=x;
        while(i>position){
            el.style.left=i+'px';
            i=i-1;
       }
        if(type==1)
            bp+=100;
        else
            pp+=100;
    //calcolo punteggio del giocatore o del banco
    if(type==1){
        b=b+assegna_valore(num);
        el=document.getElementById('banco');
        el=el.firstChild;
        el.nodeValue=b;

    }
    else{
        g=g+assegna_valore(num);
        el=document.getElementById('player');
        el=el.firstChild;
        el.nodeValue=g;
    }
}

La posizione iniziale delle immagini è 1000px. Uso firefox per testare le pagine.
Come posso rallentare il loro movimento?

Un grazie anticipato per tutti gli aiuti

[NicManzana]

Ciao cuinie!!

Per riuscire a vedere l'effetto dello spostamento devi utilizzare un ritardo da un frame all'altro, per farlo utilizza setTimeout() (ad. es.).

Ho iniziato giusto l'altro giorno a scrivere una piccola guida per realizzare animazioni, forse potrebbe esserti d'aiuto..

http://www.yourinspirationweb.com/20...zione-parte-1/

Buona giornata,
Nicolas

[cuinie]

Grazie Nicolas,

ho utilizzato la tua guida. Però ho ancora dei problemi.
ho modificato il mio codice come segue:

function move(obj){
      if(p < position){
         clearTimeout(t);
         return;
      }
      p -= 5;
      obj.style.left = p+'px';
      t = setTimeout( function(){ move(obj) }, 30 );
   }

function gc(type){
    //seleziono random seme e numero
    do{
    seme=Math.floor(Math.random()*imgg.length);
    num=Math.floor(Math.random()*imgg[seme].length);
    }while(imgg[seme][num]=="null");

    str="carta"+num_c;     
    el=document.getElementById(str);
    el.src=imgg[seme][num];
    el.style.visibility='visible';
    imgg[seme][num]="null";
    
    //position indica a quale distanza dal bordo sinistro andrà la carta
    //se type=1 allora si tratta della carta del banco
        if(type==1){
            el.style.top='50px';
            position=bp;
        }
    //altrimenti è la carta del giocatore
        else{
            el.style.top='350px';
            position=pp;
        }
            //sposto la carta

        p=parseInt(el.style.left); 
        setTimeout(function(){
                el=document.getElementById(str);
                move(el);
            },100);
       if(type==1)
            bp+=100;
        else
            pp+=100;
    //calcolo punteggio del giocatore o del banco
    if(type==1){
        b=b+assegna_valore(num);
        el=document.getElementById('banco');
        el=el.firstChild;
        el.nodeValue=b;

    }
    else{
        g=g+assegna_valore(num);
        el=document.getElementById('player');
        el=el.firstChild;
        el.nodeValue=g;
    }
}

Ho tre immagini (ad esempio A-B-C) e volevo fare in modo che due si spostassero. "B" andando a distanza 100px "C" a 200 px dal margine sinistro.
Con le modifiche che ho fatto però ho ottenuto che "B"si spostasse. Inoltre si ferma a 200px dal margine sinistro anzichè 100 come dovrebbe.
"C" invece non si sposta proprio.
Sto cercando di capire il motivo.
Ho sbagliato nell'utilizzo della setTimeot?

[NicManzana]

Ciao cuinie, l'esempio proposto è stato scritto apposta per evidenziare due eventuali problemi: spostamento e ritardo costante.. appena ho qualche minuto potrei scriverti una piccola funzione che accetti anche come argomento a quanti pixel da sx deve arrivare l'elemento, perchè così com'è attualmente non funziona