Animera med jQuery

Först och främst måste du inkludera jQuery-filen. Är du ny jQuery-användare kan du lära dig grunderna här.

Animera?

jQuerys animerings-funktion låter dig göra saker du trodde endast flash tillät dig göra. Du kan flytta runt objekt på sajten bäst du vill. Ett grymt exempel på vad du kan göra hittar du här; jQuery Robot. Du kan givetvis även höra nyttiga saker med denna funktion, detta var endast ett exempel för att visa hur kraftfullt det är.

Skapa objektet vi ska animera

För att göra detta så enkelt som möjligt ska vi flytta en helt vanlig div-box tvärs över sidan. Antingen skapar du denna själv eller så kopierar du min.

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
	#box {
		width: 250px;
		height: 250px;
		background-color: #4567DE;
		position: relative;
		}
</style>
</head>
<body>

<div id="box"></div>

</body>
</html>

OBS! Det är viktigt att du har position: relative, annars kommer inte DIVen att flytta på sig!

Det är alltså #box vi vill animera. För att välja boxen och använda oss av animate-funktionen skriver du följande innanför head-taggarna:

<script type="text/javascript">
$(document).ready(function() {

    $("#box").click(function() {
    	$(this).animate({ /*här kommer animationen */  })

    });
});
</script>

Hur animate fungerar

Att skriva en animate-funkton är väldigt likt CSS. Du skriver åt vilket håll du vill att boxen ska åka, och sedan hur långt och hur fort. Du kan lägga till flera riktningar samtidigt för att få den att åka tex diagonalt, eller om du lägger in dem efter varandra så boxen först åker höger sen nedåt. Koden jag använder för att få boxen att åka tvärs över sidan ser ut såhär:

<script type="text/javascript">
$(document).ready(function() {

    $("#box").click(function() {
    	$(this).animate({
    	"left" : "1000px"
    	});
    });
});
</script>

Ändra hastigheten

För att ändra hastigheten på animationen lägger du till tiden du vill att den ska ta i millisekunder. Alltså, 1 sekund är 1000 millisekunder.

<script type="text/javascript">
$(document).ready(function() {

    $("#box").click(function() {
    	$(this).animate({
    	"left" : "1000px"
    	}, 5000);
    });
});
</script>

Eftersom tiden är satt till 5000 millisekunder kommer animationen ta 5 sekunder att slutföras.

Summa summarum

Du kan kolla in animerings-effekten här eller kopiera den och försöka själv.

<html>
<head>
<script src="jquery.js" type="text/javascript">
<style type="text/css">
	#box {
		width: 250px;
		height: 250px;
		background-color: #4567DE;
		position: relative;
		}
</style>
<script type="text/javascript">
$(document).ready(function() {

    $("#box").click(function() {
    	$(this).animate({
    	"left" : "1000px"
    	}, 5000);

    });
});
</script>
</head>
<body>

<div id="box"></div>

</body>
</html>