Introduktion til at vise og skjule HTML-elementer

Et HTML-element kan skjules / vises med JQuery på flere forskellige måder - herunder er der links med beskrivelser og eksempler på 3 forskellige måder at gøre det på:

• show / hide - animerer med øverste hjørner som udgangspunkt
• fadeOut / fadeIn / fadeTo - animerer elementets overflade
• slideUp / slideDown - animerer med top og bund som udgangspunkt

Måden hvorpå synlighed / usynlighed animeres sker ved at ændre den eksisterende værdi i property'en 'display' - dette gælder for alle ovenstående eksempler undtagen 'fadeTo' som bruger 'opacity':

.box {
    display: block;
}	

.box {
    display: none;
}	

At animationerne bruger 'display: none; og 'display: block; til at vise og skjule elementerne, kan give problemer, når et element med for eksempel værdien 'inline-block' eller 'table-cell' ikke må ændres - i den situation kan elementet skjules eller vises med 'fadeTo'eller 'animate'.

Hastigheden hvormed elementet skjules / vises kan bestemmes ved hjælp af en ord- eller en tal-værdi, hvor det for tal-værdien gælder, at hastigheden gradvist bliver langsommere med værdien '0' som den hurtigste:

$('button').click(function() { 	
	$('.box').toggle(500); 
});		

Klik på den røde firkant, og se hvordan sidens underliggende indhold trækkes op i tomrummet, når elementet skjules ved hjælp af 'display: none;

Hvis ikke sidens layout må ændres når elementet vises eller skjules, kan elementet "wrappes" i sin helt egen container med en fast højde og bredde - her et forslag til opsætningen, hvor det animerede element er skjult med 'display: none':

<div id="container">
	<div class="element_wrap"> <!-- FAST HØJDE -->
		<div class="box"></div>
	</div>
</div>

#container  {
	width: 100%;
    height: auto;
}
.element_wrap  {
	width: 100%;
	height: 40px; /* FAST HØJDE */
}	
.box  {
	display:  none;
	width: 48%;
	height: 40px;
}