Særligt for 'fadeIn*, 'fadeOut' og 'fadeTo' er det, at hele elementets overflade vises / skjules samtidig.
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;
}
Vis elementet ved at klikke på knappen:
$('button').click(function() {
$('.box').fadeIn();
});
.box {
display: none;
}
Skjul elementet ved at klikke:
$('box').click(function() {
$(this).fadeOut();
});
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;
}
Skift mellem skjult tilstand og synlighed vad at klikke på knappen:
$('button').click(function() {
$('.box').fadeToggle();
});