[Javascript] Flackern bei FadeIn/FadeOut

[lowflyer7]

Hallo zusammen,

ich bastel gerade an einer neuen Site (http://www.amm-screening.de) und habe mir einen simplen fade-Effekt mit JavaScript gebastelt, den ich mit onmouseover/onmouseout auslöse. Jedoch führt dies im Safari zu einem Flackern, wenn man die Maus etwas schneller bewegt. Im Firefox sieht es etwas besser aus. Das Problem existiert grundsätzlich jedoch ebenson.

Hat jemand einen Tipp, wie ich das verhindern kann?

Gruß Andreas

Hier der Quellcode:

<script type="text/javascript">

function fadeIn (otf,step) {

step = step + 0.1;
document.getElementById(otf).style.opacity = step;
if (step<1) {setTimeout(function(){fadeIn(otf,step)},15);}

}

function fadeOut (otf,step) {

step = step - 0.1;
document.getElementById(otf).style.opacity = step;
if (step>0) {setTimeout(function(){fadeOut(otf,step)},15);}

}

</script>

...

onMouseover="fadeIn('aviation',0);fadeIn('avback',0);"
onMouseout="fadeOut('aviation',1);fadeOut('avback',1);"

 

[Dj-Darkside]

Für solche Grafischen "Spielereien" würde ich jQuery empfehlen. Solche Probleme kann man damit leicht umgehen und muss nicht erst Seitenlange Codes tippen.

bsp:

//fade In
$('#button').mouseenter(function(){
$('#layer').fadeIn(300);
});

//fadeOut
$('#button').mouseleave)(function(){
$('#layer').fadeOut(300);
});

 

[lowflyer7]

Okay, ich habe Deinen Rat befolgt.

Vielen Dank!

 

[wdominik]

Alternativ kannst du das ganze auch mit CSS3 lösen,

#meinElement {
  opacity: 0;
  -webkit-transition: opacity 1s linear;
}

#meinElement:hover {
  opacity: 0;
}

Für Browser != Safari und Chrome musst du dann noch die entsprechenden browserspezifischen Anweisungen nutzen.

Falls es jemanden interessiert: Das Flackern kommt vom fehlenden Beenden der Animation. D. h. sobald der Browser ein neues MouseOver/MouseOut-Event auslöst, läuft die momentane Animation weiter und zusätzlich wird eine weitere gestartet. Der Wert für step ist allerdings in der Funktion gekapselt (Function-scope und so), wodurch beide Animationen unterschiedliche Werte besitzen. Letztendlich laufen dann beide im jeweiligem 15 ms-Zyklus und aktualisieren die opacity-Eigenschaft für ihren Wert.

Lösen könntest du das ganze so

var fader = function (id, sw, i) {	var element,
		stepWitdth,
		interval,
		value,
		lastTimeout;
	
	if (!id) {
		return;
	}
		
	element = document.getElementById(id);
	stepWitdth = sw || 0.1;
	interval = i || 15;
	
	value = 1;
	
	var step = function (isPositiveDirection) {
		if (isPositiveDirection) {
			value += stepWitdth;
		} else {
			value -= stepWitdth;
		}
		
		element.style.opacity = value;
		
		console.log(isPositiveDirection);
		
		if (isPositiveDirection && value < 1) {
			lastTimeout = window.setTimeout(function () {
				step(true)
			}, interval);
		} else if (!isPositiveDirection && value > 0) {
			lastTimeout = window.setTimeout(function () {
				step(false);
			}, interval);
		}
	};
	
	var fadeIn = function () {
		window.clearTimeout(lastTimeout);
		step(true);
	};
	
	var fadeOut = function () {
		window.clearTimeout(lastTimeout);
		step(false);
	};
	
	return {
		"fadeIn": fadeIn,
		"fadeOut": fadeOut
	};
};

Und dann mit

var myFader = fader("meinElement", 0.1, 15);

für jedes gewünschte Element einen fader Erzeugen. (0.1 = Unterschied pro Schritt, 15 = Abstand zwischen Schritten in ms.)

Mit Hilfe von

myFader.fadeIn()

und

myFader.fadeOut()

das Element dann ein oder ausblenden.