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