Animere HTML-elementer

animate

Med 'animate' kan html-elementer animeres i forhold til næsten alle CSS-properties - animationerne kan ske med forskellig hastighed. Herunder nogle af de mest almindelige typer af animationer:

  • horizontal og vertikal placering
  • højde og bredde
  • margin og padding
  • synlighed
  • skriftstørrelse
$('button').click(function() {
	$('.box').animate({
	'width' : '300px' 
	}); 
});

CSS-properties med flere ord

Når jeg i Jquery adresserer en CSS-property som består af flere ord - for eksempel 'padding-left' - kan jeg vælge mellem 2 forskellige metoder:

"hyphen-separated":
$('button').click(function() {
	$('.box').animate({
	'padding-left' : '12px' 
	}); 
});
"camelCase":
$('button').click(function() {
	$('.box').animate({
	'paddingLeft' : '12px' 
	}); 
});

animere farver

Enkelte 'properties' er lidt mere besværlige at animere - er der farver involveret i animationen, kræves det ofte, at farverne skal konverteres fra HEX til RGB. Læs mere om forskellene mellem HEX og RGB i artiklen "Farveskemaerne HEX og RGB".

Måske kan CSS3's 'transitions' bruges som et alternativ til JQuery's 'animate.

En anden mulighed er at bruge et plugin for eksempel jQuery UI eller Bitstorm.

Ændre elementets størrelse

Jeg kan ændre elementets størrelse ved hjælp af de samme værdier som bruges i CSS for eksempel 'procent' og 'pixel'. Værdien 'rem' kan imidlertid volde vanskeligheder - her en artikel fra Stackoverflow om emnet.

Reducer elementets bredde til 10% ved at klikke på knappen:

KLIK
$('button').click(function() {
	$('.box').animate({
	'width' : '10%' 
	}); 
});
.box {
	width: 48%;
}	

Lægge til og fra

Jeg kan lægge til og trække fra i elementets eksisterende størrelse ved at bruge plus '+' og minus'-', og bestemme med hvilken hastighed det sker ved at indsætte en værdi sidst i funktionen - læs mere om hastigheder i artiklen "Introduktion til at vise og skjule HTML-elementer"

Gør elementet 20px bredere med en hastighed på 100ms hver gang der klikkes på knappen:

KLIK
$('button').click(function() {
	$('.box').animate({
	'width' : '+=20px' 
	}, 100
	); 
});
.box {
	width: 48%;
}	

Animer kun en enkelt gang

Når jeg bruger plus '+' og minus '-' vil animationen gentages hver gang knappen klikkes - jeg kan ved hjælp af '.one()' begrænse antallet af animationer til en enkelt som aktiveres på første klik.

Brug kun animationen første gang knappen klikkes:

KLIK
$('button').one('click', function() {
		$('.box').animate({
		'width' : '+=50px'
		});
	});

Ny placering horizontalt og vertikalt

Når elementet skal flytte sig fra en placering på siden til en ny, er der en række forskellige muligheder: jeg kan bruge 'top', 'left', 'margin' osv - alle de samme 'properties' jeg normalt bruger i CSS, når jeg placerer et html-element på siden.

Men det ikke helt let at overskue, hvordan elementet reagerer - afhængigt af hvilken 'property' der anvendes i 'animate', om 'property'en' samtidig er defineret i CSS og hvilken 'position' elementet er placeret med, kan animationen opføre sig på forskellige måder.

Mine tests viser, at jeg ved at bruge 'margin-' efterfulgt af en retning i animationen får det samme resultat uanset elementets styling i øvrigt - er elementet der skal flyttes et billede. kan 'backgroundPosition' bruges som et alternativ.

  • brug 'marginLeft' til horizontale animationer
  • brug 'marginTop' til vertikale animationer

Horizontal placering - omgivende container

Placer elementet 100px til højre for venstre side af den omgivende container:

$('button').click(function() {
	$('.box').)animate({
	'marginLeft' : '150px'
	}); 
}); 

Horizontal placering - nuværende placering

Flyt elementet 50px til venstre i forhold til den nuværende placering:

$('button').click(function() {
	$('.box').)animate({
	'marginLeft' : '-=50px'
	}); 
}); 
.box {
	left: 100px;
}	
  • brug 'marginLeft' til horizontale animationer
  • 'marginLeft 0' er venstre side af den omgivende container og animationens udgangspunkt
  • negative værdier trækker elementet over på venstre side af den omgivende container
  • brug plus og lig med += til at bevæge elementet mod højre i forhold til nuværende placering
  • brug minus og lig med -= til at bevæge elementet mod venstre i forhold til nuværende placering

Vertikal placering - omgivende container

Placer elementet 20px væk fra toppen af den omgivende container:

$('button').click(function() {
	$('.box').animate({
	'marginTop' : '20px'
	}); 
}); 
  • brug 'marginTop' til vertikale animationer
  • 'marginTop 0' er toppen af den omgivende container og animationens udgangspunkt
  • negative værdier trækker elementet over på øverste side af den omgivende container
  • brug plus og lig med += til at bevæge elementet mod bunden i forhold til nuværende placering
  • brug minus og lig med -= til at bevæge elementet mod toppen i forhold til nuværende placering

Flere animationer samtidig

Jeg kan animere flere 'properties' på samme tid:

Flyt elementet 30% til venstre i forhold til placeringen i den omgivende container
- gør elementet 20px højere i forhold til nuværende højde
- lav elementet 10% smallere i forhold til den nuværende bredde og
- reducer synligheden til 'opacity: 0.5'

$('button').click(function() {
	$('.box').animate({
	'marginLeft' : '+=30%', 
	'height' : '+=20px',
	'width' : '-=10%',  
	'opacity' : )'0.5' 
	}); 
}); 

Kør kun animationerne første gang knappen klikkes

Når jeg bruger plus '+' og minus '-' vil animationen gentages hver gang knappen klikkes - jeg kan ved hjælp af '.one()' begrænse antallet af animationer til en enkelt som aktiveres på første klik.

Kør kun animationerne første gang knappen klikkes:

$('button').one('click', function() {
	$('.box').animate({
	'marginLeft' : '+=80px', 
	'height' : '+=20px', 
	'opacity' : '0.5' 
	});
});

Animer en enkelt property af gangen

I stedet for at lade alle animationerne køre på samme tid, kan jeg afvikle en enkelt af gangen.

Når elementet er placeret 10% inde i den omgivende container
- så reducer efterfølgende højden til 20px
- og kør kun animationerne første gang der klikkes:

	$('button.seks').one('click', function() {
		$('.box.blue_tre').animate({
		'marginLeft' : '10%'
		});
		$('.box.blue_tre').animate({
		'height' : '20px'
		});
	});