Animons nos page avec jQuery

Aujourd'hui un exemple pour animer vos pages web grâce à jQuery.

Nous allons utiliser la fonction .animate() celle-ci permet de modifier le css d'un ou plusieurs élément(s) de votre page.

Dans cet exemple nous allons travailler avec cinq liens qui vont nous permettre de faire bouger une balise html <p>.

Dans la balise body placez :

<a href="javascript:void(0)" onclick="anim1();">anim1();</a>
<a href="javascript:void(0)" onclick="anim2();">anim2();</a>
<a href="javascript:void(0)" onclick="anim3();">anim3();</a>
<a href="javascript:void(0)" onclick="anim4();">anim4();</a>
<a href="javascript:void(0)" onclick="anim5();">anim5();</a>
<p id="p1">Paragraph with some text</p>

Puis dans le head ajouter la bibliotheque jQuery ainsi que nos différentes fonctions :

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function anim1(){
	$("#p1").animate(
		{
			paddingLeft:"100px",
			paddingTop:"0px"
		},
		1000
	);
}
function anim2(){
	$("#p1").animate(
		{
			paddingLeft: "200px",
			paddingTop:"0px"
		},
		1000
	);
}
function anim3(){
	$("#p1").animate(
		{
			paddingLeft:"200px",
			paddingTop:"100px"
		},
		1000
	);
}
function anim4(){
	$("#p1").animate(
		{
			paddingLeft:"100px",
			paddingTop:"100px"
		},
		1000
	);
}
function anim5(){
	$("#p1").animate(
		{
			paddingLeft: "200px",
			paddingTop:"0px"
		},
		1000
	);
}
</script>

La premiere ligne inclus la librairie jQuery : "jquery-1.3.2.min.js". Ensuite j'ai créer 5 fonctions qui modifieront #p1 comme en CSS la balise avec l'id qui sera égale à p1 soit une balise avec id="p1".
Avec la fonction animate je modifie une ou plusieurs valeurs de CSS pour pouvoir déplacer mon élément sur ma page.
N'hésitez pas à ajouter des commentaires si vous avez besoin de plus d'explications.

Voir la démonstration

Une seconde démonstration. Dans celle-ci j'ai ajouté la fonction fadeTo() qui permet de modifier l'opacité du texte.
Voir la démonstration 2