11548 sujets

JavaScript, DOM et API Web HTML5

[RÉSOLU] Premier pas en JQuery et animation d'images

Bonjour,

Je souhaiterais supprimer les animations flash présentes sur mon site http://www.couleurkemia.fr/ et les remplacer par des animations JQuery.

Débutant dans JQuery, j'ai commencé à écrire quelques lignes et beaucoup de questions sont apparues.
Voici mon code
Côté html :
	
<div id="content">
	<div id="image0"><img src="image.jpg"/></div>
	<div id="image1"><img src="image.jpg"/></div>
</div>

Côté CSS

#content{
position:relative;
width:75px;
height:137px;
top:30px;
overflow:hidden;
border:5px solid #C7C7C7;
} 
#image1{
position:absolute;
right:-100px; /*en dehors de l'image pour le faire apparaitre de droite à gauche*/
top:0px;
z-index:2;
}
#image0{
z-index:1;
}


Côté JS :

$(document).ready(function() {
animation();
})
function animation(){
	$("#image0").css("opacity", "0.0");
	$('#image1').css("right", "-100px");
	$('#image1').animate({right: '0px'},2000 ).animate({opacity:0}, 1000);
	$("#image0").animate({opacity:1.0},1000);
}


Et voici les questions auxquelles je suis confrontées :
1/ Comment appliquer cela à toutes les animations présentes sur la page (et pas seulement celle nommée en dur dans le code JS) ?
2/ Peux t'on synchroniser les modifications d'opacité des 2 images afin d'avoir un effet de "fondu enchaîné" ?
3/Comment faire une boucle perpétuelle sur ces animations ?

Si vous avez des idées, je suis preneur Smiley ravi
Modifié par Babali (06 Nov 2010 - 18:23)
Hello,

1/ Tu peux sélectionner avec jQuery de la même façon que tu sélectionnes en CSS.
Dans ton cas je te conseilles déjà d'ajouter des classes à ton HTML pour plus facilement cibler tes éléments images, plutot que des id.

Par exemple :
<div id="content"> 
    <div class="imageToAnimate"><img src="image.jpg"/></div> 
    <div class="imageToAnimate"><img src="image.jpg"/></div> 
</div>


Tu peux maintenant appliquer le même style CSS à tous les éléments (anciennement #image0 et #image1) en faisant
.imageToAnimate { }

et 
$('#content .imageToAnimate')


2/ Pour avoir un effet de fondu enchainé, tu peux par exemple afficher les deux images l'une sur l'autre (en position:absolute). Puis faire disparaitre petit à petit celle du dessus, ce qui fera apparaitre celle du dessous.
Et tu peux la faire réapparaitre petit à petit ensuite.

3/ Chaque fonction d'animation de jQuery possède une fonction de callback qui s'execute une fois l'animation terminée (je n'ai plus le nom en tête, il faudra que tu check la doc ). Il te suffit de relancer l'animation à chaque fois qu'elle est finie.
Voilà ce que cela donne
En javasscript :

$(document).ready(function() {
animation();
})
function animation(){
$(".image0").css("opacity", "0.0");
	$(".image1").css("opacity", "1.0");
	$('.image1').animate({right: '-100px'},0 );
	$('.image1').animate({right: '0px'},2000 ).animate({opacity:0.0},1000);
	$(".image0").animate({opacity:1.0},1000);
}
setInterval("animation();",5000);


Nous avons donc une animation de l'image avec une animation en boucle.
Sujet clos
Aller à