ugrás a tartalomhoz

Opacity fade nem működik osztály esetén

kamba · 2009. Nov. 26. (Cs), 11.41
Sziasztok az a problémám hogy van egy opacity fade-elő kódom ami szép átlátszóságot generál.ezt is szeretném átalakítani egy osztállyá hogy ha kell több is működjön egyszerre.legjobb ha bemásolom a működő kódot és a nemműködőt is.

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;
	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			window.setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			window.setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}
Ez működik is szépen
most az osztály amit összetákoltam:

var opacity2 = function(id, opacStart, opacEnd, millisec) {
	this.object = document.getElementById(id).style; 
    this.opacStart = opacStart;
	this.opacEnd = opacEnd;
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer= 0;
	//this.intid = new Array();
	}
	//determine the direction for the blending, if start and end are the same nothing happens
	opacity2.prototype.fade = function(){
	var self= this;
	if(this.opacStart > this.opacEnd) {
		for(i = this.opacStart; i >= this.opacEnd; i--) {
		    //alert(i);
			window.setTimeout(function (){self.changeOpac(i);},(this.timer * this.speed));
			this.timer++;
		}
	} else if(this.opacStart < this.opacEnd) {
		for(i = this.opacStart; i <= this.opacEnd; i++)	{
		    //alert(i);
			window.setTimeout(function (){self.changeOpac(i);},(this.timer * this.speed));
			this.timer++;
		}
	}
}

//change the opacity for different browsers
opacity2.prototype.changeOpac = function(opacity) {
	this.object.opacity = (opacity / 100);
	this.object.MozOpacity = (opacity / 100);
	this.object.KhtmlOpacity = (opacity / 100);
	this.object.filter = "alpha(opacity=" + opacity + ")";
}
Eddig jutottam de itt ismeretlen hibába ütköztem ugyanis a kód átmenet nélkül átvált a legkissebb vagy a legnagyobb opacity értékre minden átmenet nélkül.valahogy a SetTimeout függvénnyek nem futnak le a for ciklusokban aszthiszem vagy egyéb ismeretlen hiba lép fel.
Nagyon szépen megköszönöm ha valaki leirja hogy milehet a hiba mert még elég tapasztalatlan vagyok.köszi előre is.
 
1

talan

carstepPCE · 2009. Nov. 26. (Cs), 12.13
a 16. sorban ez biztos self nem pedig this?

self.changeOpac


-cs-
Sanyi
2

igen biztos

kamba · 2009. Nov. 26. (Cs), 12.44
Én is this-re tippeltem volna először de úgy a sima changeOpac() függvényre hivatkozik osztályon kívül.
3

..

carstepPCE · 2009. Nov. 26. (Cs), 12.55
nem lehet, hogy a self az foglalt nev, valassz valami mast, bar elvileg a this -nek is mukodnie kellene.
Amig teszteled commenteld ki a regit, hogy ne zavarjon
4

változatlan

kamba · 2009. Nov. 26. (Cs), 13.16
nem reserved a self szó mással is változatlan a működés.A this-re pedig a FIREBUG aszondja hogy a (this.changeOpac is not a function).
5

...

carstepPCE · 2009. Nov. 26. (Cs), 13.27
function (){self.changeOpac(i);} , lehet rossz a scope, amiben van. Esetleg egy console.log -al irasd mar ki, hogy ennek az anonymous fuggvenynek mi a scope-ja, szerintem window lesz. akkor viszont a self helyett a window.opacity2.changeOpac(i); -t kellene hivnod.

Sajna most nincs lehetosegem kiprobalni, lehet csak vaktaba lovoldozom :-)

-cs-
Sanyi
6

miért kell osztály?

errata · 2009. Nov. 26. (Cs), 20.57
a fenti funkciót, miért ne tudnád többször elindítani? Más attribútumokkal, ha a változók privátak nem okozhat problémát...
most megnéztem a kódodat simán működik több is párhuzamosan nálam...

a body részt bemásolom ezzel működött:

<body>
    <div id="alma" style="width: 100px; height: 100px; background: #000"></div>
    <div id="korte" style="width: 100px; height: 100px; background: #000"></div>
    <script type="text/javascript">
        opacity("alma", 100, 50, 1000);
        opacity("korte", 100, 20, 2000);
    </script>
</body>
7

nemtudtam

kamba · 2009. Nov. 26. (Cs), 21.12
szeva.eddig abban a tudatban voltam hogy egy funkció egyszerre 1 objektumot képes kezelni.Legalábbis más kódokkal igy volt (mármint hogy az egyik futása közben meghívtam ujra más objektummal akkor nemkívánt eredményt kaptam).Azért gondoltam az osztályos megoldásra hogy több objektumot is tudjon kezelni a kódom.De mindenesetre én is kipróbálom az általad küldött megoldást.köszi hogy felhívtad a figyelmemet rá.
És valóban működik
8

értem már vagyis kapizsgálom

kamba · 2009. Nov. 26. (Cs), 21.24
Van egy kód amit szintén segítséggel csináltam (objektum orientált kód próbája)néven nyitottam itt a topicot 5napja.szóval ott globális változót vagyis nem privát(értelmezésem szerint nem LOKÁLIS(FUNKCIÓN BELÜLI))használtam számoláshoz és azért kellett osztályosítani.Akkor ezek szerint minden ilyen lokális változós függvényt lehet hívni tetszőleges számban.most fontosat tanultam aszthiszem köszönöm szépen.
9

javaslat

errata · 2009. Nov. 26. (Cs), 22.29
amúgy a scripted 100%-osan működik, amit javasolnék, hogy ne tegyél be akár 100db időzítőt a böngészőbe, mivel ez kicsit lefoglalja az erőforrásokat, szebb lenne ha inkább minden opacitíy állítás után időzíteni a következő állítást...
persze azért nem vészes ez sem, csak ha az oldaladon nagyon sok javascript lesz akkor már érezhetőek ezek a finomhangolások...