✔ Fading Problem!

N

navyseal1

Mitglied
Hallo!
Versuche schon seit einer Stunde ein recht einfaches Fading Script zu basteln, jedoch funkt das nicht so ganz wie es soll. Möchte bewusst das selber bauen, da ich noch in der lernphase bin ;)

Aber irgendwie ist der BG gleich nach 1 Sek schon rot!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>AJAX</title>
<script language="javascript">

function getlower(){
	var i = 1;
	var delay=100;
	for(i=1;i<=255;i++){
		delay=5*i;
		setTimeout("setColor("+i+")",delay);
	}
}

function gethigher(){
	var i = 1;
	var u = 255
	var delay=100;
	for(i=1;i<=255;i++){
		delay=10*i;
		u = u-i;
		setTimeout("setColor("+u+")",delay);
	}
}

function setColor(i){
	document.getElementById("Ausgabe").style.backgroundColor="rgb("+ i +",0,0)";
}

</script>
</head>
<body>
<div id="Ausgabe" onmouseover="getlower()" onmouseout="gethigher()"> sads asd asd asd a asd</div>

</body>
</html>


Mir kommt vor, dass das i sich irgendwie parallel zum Timeout weiterentwickelt. Vielleicht kann mir jemand nen kleinen Tipp geben :D


ok habs selber schon gelöst! ... das Problem war das setTimeout ... das muss nämlich mitwandern!


@edit ....
Nun ist aber ein anderes Problem aufgetaucht! Und zwar is es nicht möglich 2 Fades hintereinander ohne "Stocken" auszuführen. Ist das normal? Habe den neuen Source nun oben erwetiert.
 
Zuletzt bearbeitet:
Hi,

probiers mal mit dem: (hoff ich hab dich richt verstanden)
Code: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>AJAX</title>
<script language="javascript">
var intervalLight = null;
var intervalDark = null;
var maxColor = 255;
var minColor = 0;
var currentColor = 0;
var speed = 1;
var growth = 5;
function lightStart()
{
	window.clearInterval(intervalDark);
	intervalDark = null;
	intervalLight = window.setInterval("light()",speed);
}
function light()
{
	if(currentColor <= (255-growth))
	{
		currentColor = currentColor+growth;
		setColor(currentColor);
	}
	else
	{
		window.clearInterval(intervalLight);
		intervalLight = null;
	}
}
function darkStart()
{
	
	window.clearInterval(intervalLight);
	intervalLight = null;
	intervalDark = window.window.setInterval("dark()",speed);
}
function dark()
{
	if(currentColor > (0+growth))
	{
		currentColor = currentColor-growth;
		setColor(currentColor);
	}
	else
	{
		window.clearInterval(intervalDark);
		intervalDark = null;
	}
}
function setColor(i){
	document.getElementById("Ausgabe").style.backgroundColor="rgb("+ i +",0,0)";
}

</script>
</head>
<body>
<div style="background-color:#000000" id="Ausgabe" onmouseover="lightStart()" onmouseout="darkStart()"> sads asd asd asd a asd</div>

</body>
</html>

Das problem mit dem Ruckeln kommt bei dir glaube ich daher, dass die Schleife vom mouseout script ausgeführt auch wenn die schleife vom mouseoverscript noch nicht abgearbeitet wurde
 
Hi! Sehr nice deine Funktion!

Hab zu sehr später Stunde noch eine Eingebung gehabt und möchte die hier auch noch los werden :D

Einfach das Objekt + StartRGB + EndeRGB + Scale eingeben und das Ganze sollte funktionieren!

Code: 
function fadeColor(element,rs,gs,bs,re,ge,be,scale){
	
	var r=rs;
	var g=gs;
	var b=bs;
	var i=1;
	
	var colorArray = new Array(3);
	
	colorArray[0] = Math.abs(r-re);
	colorArray[1] = Math.abs(g-ge);	
	colorArray[2] = Math.abs(b-be);
	colorArray.sort(sortNumber);


	for(i=1;i<=colorArray[2];i++){
	
		if(Math.abs(r-re)!=0){
			if(rs<re){
				r++;		
			}else{
				r--;}
		}
		if(Math.abs(g-ge)!=0){
			if(g<ge){
				g++;		
			}else{
				g--;}
		}
		if(Math.abs(b-be)!=0){
			if(b<be){
				b++;		
			}else{b--;}
		}
		setTimeout("setColor("+r+","+g+","+b+",'"+element.id+"')",i*scale);
	}

}


function setColor(r,g,b,elementId){
	document.getElementById(elementId).style.backgroundColor="rgb("+ r +","+ g +","+ b +")";
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück