Introduktion til at vise og skjule HTML-elementer

Forskellige muligheder

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å:

display block eller none

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':

Et skjult element bliver synligt ved hjælp af
.box {
    display: block;
}	
Et synligt element skjules ved hjælp af
.box {
    display: none;
}	

Problemer med inline elementer og flere

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'.

Hastighed

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); 
});		
  • '500' = 500 ms = 0.5 sekund
  • '1000' = 1000 ms = 1 sekund
  • '5000' = 5000 ms = 5 sekunder
  • 'fast' - svarende til 200 ms
  • 'slow' - svarende til 600 ms

Layoutet ændres i højde og bredde

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;
}