fadeIn / fadeOut / fadeTo

Beskrivelse af fadeIn, fadeOut og fadeTo

Særligt for 'fadeIn*, 'fadeOut' og 'fadeTo' er det, at hele elementets overflade vises / skjules samtidig.

  • 'fadeOut', 'fadeIn' og 'fadeTo' animerer på hele elementets overflade på samme tid
  • 'fadeOut' og 'fadeIn' viser / skjuler elementet med 'display'
  • 'fadeTo' viser / skjuler elementet med 'opacity'
  • 'fadeOut', 'fadeIn' og 'fadeTo' animerer med en default hastighed på 400 ms
  • hastigheden kan justeres med en ord- eller tal-værdi

IE8 og opacity

Der kan være problemer med brugen af de forskellige typer af 'fade' i IE8, da den glidende overgang skabes ved hjælp af CSS3's 'opacity' - en løsning kan være at adressere Microsofts filter for 'opacity' i elementets CSS for eksempel:

.box {
	opacity: inherit;
	filter: inherit; 
}	

fadeIn

Vis elementet ved at klikke på knappen:

$('button').click(function() { 	
	$('.box').fadeIn(); 
});		
.box {
	display: none;
}	
  • 'fadeIn' bruges kun på skjulte elementer
  • 'fadeIn' viser kun elementer stylet med 'display: none'

fadeOut

Skjul elementet ved at klikke:

$('box').click(function() { 	
	$(this).fadeOut(); 
});		
  • 'fadeOut' bruges kun på synlige elementer
  • 'fadeOut' skjuler et element ved hjælp af display: none;

fadeTo

fadeTo adskiller sig ved ikke at bruge 'display' til at vise og skjule elementer - istedet bruges 'opacity' til enten at vise, skjule eller gøre et element delvist synligt.

Dette giver mulighed for at vise /skjule elementer for hvilke det er nødvendigt at bibeholde en værdie i 'display', som ikke er 'block' eller 'none', men for eksempel 'inline', table-cell' etc.

Vis elementet ved at klikke på knappen - elementet er delvist gennemsigtigt:

$('button').click(function() { 	
		$('.box').fadeTo('slow',0.5); 
	});
.box {
	opacity: 0.0;  
	display: inline;
}	
  • 'fadeTo' kan bruges på synlige og usynlige elementer
  • 'fadeTo' bruger 'opacity' til at vise / skjule elementer - ikke display
  • animationen kan stoppes så elementet er delvist synligt
  • 'opacity' angives som den sidste værdi - i eksemplet '0.5'
  • hastigheden bestemmes i den første værdi - i eksemplet 'slow'

toggle mellem fadeOut og fadeIn

Skift mellem skjult tilstand og synlighed vad at klikke på knappen:

SKJUL
$('button').click(function() { 	
	$('.box').fadeToggle(); 
});