date un occhio al seguente script:
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>
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).
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!?!?!?!