Fade-Effekt bei Mouseover... wie und wo merken?

[Struppi]

Es soll auf jeden Fall bis zum Ende eingeblendet werden, nur halt wieder verschwinden, wenn der Mauszeiger nicht mehr über das Viereck »steht«. Sprich: Einmal Hovern, egal wie schnell oder langsam, soll das Bild bis zur vollen Sichtbarkeit gezeigt werden.

Also einblenden beim hovern, bis zum Ende. ausblenden beim mouseout zu bis zum Ende. Und wenn die Mouse dann wieder das einblenden anstößt und dann wieder weg geht?
Du kannst dieses Spielchen bis zum Ende betreiben und hast eine endlose Rekursion oder eine Unterbrechung in dem Ablauf. Also:

1. mouseover
2. einblenden. währenddessen -> mouseout -> einblenden geht weiter
3. ausblenden. währenddessen -> mouseover -> ausblenden geht weiter?

Im Moment passiert folgendes: Beim schnellen Hovern wird der Timeout immer wieder neu angestoßen,

Dein Ansatz ist nicht besonders elegant und widerspricht auch vielen Programmierparadigmen. Du verwendest hier ein Objekt, das keinen Sinn macht. Du erzeugst einfach unzählige timeouts, anstatt den Ablauf zu steuern.

Ich würd' das in etwa so umsetzen:

var fade = new function() {  
	var aktiv = false;  
	var node;  
	var o = 0;  
	var inout = true;  
	var	callback;  
	function fade_func() {  
		node.style.filter = 'Alpha(opacity=' + o + ')';  
		node.style.opacity = o / 100;  
		o += inout ? 1 : -1;  
		if( (inout && o > 100) || (!inout && o < 0)){  
			aktiv = false;  
			if(callback) callback();  
			callback = null;  
		} else {  
			window.setTimeout(fade_func, 10);  
		}  
	};  
	  
	this.init = function(action, fade_node) {  
		action  =  document.getElementById(action);  
		if(!action) return;  
		  
		action.onmouseover = function() {  
			if(!aktiv){  
				inout = true;  
				aktiv = true;  
				fade_func();  
			}  
		};  
		action.onmouseout = function() {  
			if(aktiv) {  
				callback = function() {  
					aktiv = true;  
					inout = false;  
					fade_func();  
				};  
			} else {  
				aktiv = true;  
				inout = false;  
				fade_func();  
			}  
		};  
		node =  document.getElementById(fade_node);  
	};  
};  
window.onload = function() {fade.init('foo', 'fadein');}  

Struppi.