[Javascript] Flackern bei FadeIn/FadeOut

lowflyer7

Cripps Pink
Registriert
29.01.08
Beiträge
154
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

Hildesheimer Goldrenette
Registriert
14.01.07
Beiträge
679
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);
});
 

wdominik

Weißer Winterglockenapfel
Registriert
15.01.10
Beiträge
880
Alternativ kannst du das ganze auch mit CSS3 lösen,
Code:
#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
Code:
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
Code:
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
Code:
myFader.fadeIn()
und
Code:
myFader.fadeOut()
das Element dann ein oder ausblenden.
 
Zuletzt bearbeitet: