date un occhio al seguente script:
l'oggetto "anima" serve a creare animazioni personalizzate secondo i parametri che gli vengono passati in fase di creazione. questi vengono salvati in variabili private (le prime 5 variabili dell'oggetto). il metodo start() si prende poi cura di lanciare reiterativamente il metodo privato fx che cambia la poroprietà css che si è scelto in fase di istanziazione dell'oggetto. il metodo read() serve invece a leggere la variabile privata css_PR relativa al nome della proprietà css in questione (ha solo funzione di debug e non ha nessuna funzione relativa all'animazione).codice:<html> <head> <title>Documento senza titolo</title> </head> <body> <div id="x" style="background: #D4FFAA; width: 200px; line-height: 100px;">ciao mondo!</div> <script type="text/javascript"> function anima(DOMtarget, css_pr, css_start, css_end, css_scale){ // alert("chiamata al costruttore") // attributi privati dell'oggetto // dopo la creazione dell'oggetto rimangono disponibili per i metodi var DOMtarget = document.getElementById(DOMtarget); var css_PR = css_pr; var css_START = css_start; var css_END = css_end; var css_SCALE = css_scale; // costanti a cui trovare collocazione e per ora settati "a mano" in questa zona var step = 1; var growth = 20; var iterate = null; fx = function(){ // alert("fx"); // prima esecuzione di fx - non ci sono stili css impostati via js if(step == 1){ DOMtarget['style'][css_PR] = (step * growth) + css_SCALE; step++; } // this is the end ... my only friend the end ... else if(DOMtarget['style'][css_PR] == css_END + css_SCALE){ window.clearInterval(iterate); document.title = "THE-END"; return; } // on the way there ... else{ DOMtarget['style'][css_PR] = (step * growth) + css_SCALE; step++; } } this.start = function(){ // alert("start"); iterate = window.setInterval(fx, 100); } this.read = function(){ alert(css_PR); } } // instanzio oggetto di prova var prova1 = new anima("x", "paddingTop", "0", "320", "px"); var prova2 = new anima("x", "marginLeft", "0", "320", "px"); </script> start oggetto effetto 1 start oggetto effetto 2 <hr /> read css property oggetto effetto 1 read css property oggetto effetto 2 </body> </html>
come vedete ho istanziato 2 oggetti "anima": uno che dovrebbe modificare il padding-top e uno che dovrebbe modificare il margin-left. il problema è che entrambi i metodi modificano il margin-left. come se la viariabile privata css_PR venisse sovrascritta quando viene istanziato il secondo oggetto. però se provate a lanciare il metodo read in relazione ai 2 oggetti (vedi seconda coppia di link) noterete che entrambe le variabili contengono la proprietà css che si era scelto all'inizio per i 2 oggetti. sembra insomma che fx() non usi la relativa variabile privata ma qualche altra copia che, aimè, è stata sovrascritta. boh!?!?!?!
Rispondi quotando