slideUp og slideDown af HTML-elementer

Beskrivelse af slideUp / slideDown

Særligt for 'slideUp* og 'slideDown' er det, at elementet vises / skjules ved at søge mod toppen eller bunden af den omgivende container, samtidig med at det bliver smallere.

  • 'slideUp' og 'slideDown' animerer på elementets bredde
  • animationen tager udgangspunkt i den omgivende containers top eller bund
  • 'slideUp' og 'slideDown' animerer med en default hastighed på 400 ms
  • hastigheden kan justeres med en ord- eller tal-værdi

slideUp

Skjul elementet ved at klikke:

$('button').click(function() { 	
	$('.box').slideUp(); 
});		
  • 'slideUp' bruges kun på synlige elementer
  • elementet søger mod top af den omgivende container

slideDown

Vis elementet ved at klikke på knappen:

$('button').click(function() { 	
	$('.box').slideDown(2000); 
});		
.box {
	display: none;
}	
  • elementet søger mod bund af den omgivende container
  • 'slideDown' bruges kun på skjulte elementer
  • 'slideDown' viser kun elementer stylet med 'display: none'

toggle mellem slideUp og slideDown

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

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