Rendre une animation (sliders) plus fluide
Bonjour,
Je dois développer un effet de volets pour un futur projet web. J'adopterais un framework pour çà. Mais avant, je voulais réaliser cet animation moi même a partir de mes connaissances uniquement.
J'ai donc pondu ceci : http://ia62.ac-lille.fr/sliders/
A/ Problème, comment pourrais-je rendre l'animation plus fluide ?
De plus, j'ai remarqué sous IE6 que le sablier clignotait pendant que la fenêtre s'expand...
J'ai fait le test avec des images plus light et aussi sans image. Pareil çà saccade toujours.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
function expandFenetre(valeur,pas) {
// A FAIRE = desactiver le click sur voletx tant que l'animation n'est pas fini
// sinon on ne garde plus la hauteur initiale definie dans le CSS
incrementation = pas;
fenetre = $("fenetre"+valeur);
// Recupere le height
if (fenetre.currentStyle){ // pour IE
hauteur = fenetre.currentStyle['height'];
} else if (window.getComputedStyle){ // pour FF et autre
hauteur = window.getComputedStyle(fenetre,null).height;
}
hauteur = parseInt(hauteur); // conversion en number
// 1er appel ? -> Sauvegarde Height initiale et reset a 0px
if (appelFade == 0) {
hauteurInitiale = hauteur;
appelFade = 1;
fenetre.style.height = "0px";
hauteur = 0;
}
fenetre.style.display = "block";
if (hauteur < hauteurInitiale) {
hauteur = hauteur + pas;
fenetre.style.height = hauteur+"px";
timer = setTimeout("expandFenetre(indice,incrementation)",1);
}
// sauvegarde cette fenetre comme etant la fenetre active
fenetreVisible = indice;
} |
B/ Quel framework(s) me conseillez vous pour ce type d'effets ? Prototype ? jQuery ? Scriptaculous ?
Je n'arrive pas a me decider car je ne les ai jamais essayé.
