Animere HTML-elementer

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:

$('button').click(function() {
	$('.box').animate({
	'width' : '300px' 
	}); 
});

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:

$('button').click(function() {
	$('.box').animate({
	'padding-left' : '12px' 
	}); 
});

$('button').click(function() {
	$('.box').animate({
	'paddingLeft' : '12px' 
	}); 
});

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.

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:

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

.box {
	width: 48%;
}	

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:

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

.box {
	width: 48%;
}	

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:

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

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.

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

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

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

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

.box {
	left: 100px;
}	

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

$('button').click(function() {
	$('.box').animate({
	'marginTop' : '20px'
	}); 
}); 

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

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

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