J’ai refait la page d’accueil du nom de domaine Guilou.fr pour y placer quelques liens vers différents réseaux. J’ai eu pas mal de difficulté à faire apparaitre les icônes successivement. Maintenant que j’ai trouvé, je vais vous livrer ma solution (qui n’est peut-être pas la meilleure, mais qui marche)
L’effet
Vous aurez surement reconnu l’usage de l’effet « fade in » de jQuery. Celui-ci est très simple à utiliser :
$('#monElement').fadeIn('slow');
Si on regarde mon code source, on se rend compte que j’ai listé les différents liens, auxquels j’ai associés en CSS une icône. Pour que je n’ai pas à changer le code JavaScript dès que je rajoute un nouveau lien, nous pouvons utiliser la fonction each(). Prenons la liste suivante :
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
En supposant bien sûr qu’il y a une règle CSS du type li { display: none; }
qui masque les éléments de la liste par défaut (ou pas : cf edit), alors on peut les faire apparaitre avec le code JavaScript suivant :
$(document).ready(
function() {
var liste = $('li');
liste.each(
function() {
$(this).fadeIn('slow');
}
);
}
);
Pour expliquer ce code : on attend que le document soit entièrement chargé, on récupère la liste des items de liste, puis on les affiche en appliquant un effet de fondu. Si on essaye ce bout de code, on se rend compte que cela marche, mais tout s’affiche d’un seul coup !
Edit du 7 août : Comme le fait remarquer pertinemment Guenhwyvar en commentaire de l’article, la méthode utilisant le CSS pour masquer les items de la liste est mauvaise. En effet, dans le cas où le visiteur n’a pas activé JavaScript, il ne verra jamais les icônes ! La solution consiste alors à cacher les items… en JavaScript !
Par exemple :
$(document).ready(function() {
$('li').css("display", "none");
});
La temporisation
La difficulté est d’afficher les éléments de la liste uns par uns. En effet, il n’existe pas de fonction sleep() en JavaScript, ni en jQuery (bien qu’il semblerait que des plugins le permettent). On ne peut pas utiliser la fonction each() et imposer un temps de latence entre chaque élément lors du parcours. Il faut alors ruser, et utiliser la fonction setTimeout() pour afficher les images les unes après les autres.
Le bout de code JavaScript devient donc :
$(document).ready(function() {
$('li').css("display", "none");
});
window.setTimeout("afficherItem()", 200); });
function afficherItem() {
var item = $('li:hidden:first');
if($(item).text()) {
$(item).fadeIn('slow');
window.setTimeout("afficherItem()", 200);
}
}
Petite explication : on appelle la fonction afficherItem() 200 millisecondes après la lecture de la première ligne du code JavaScript. Cette fonction retrouve le premier élément de liste qui est caché (c’est ce que signifie le « li:hidden:first »). Si cet élément existe (on regarde s’il a une valeur quelconque avec la fonction text()), alors on l’affiche avec un effet de fondu.
Enfin, on rappellera la fonction afficherItem() dans 200ms dans le but d’afficher tous les items de la liste.
C’est ainsi que petit a petit, chaque lien sera affiché avec 200ms d’écart et un petit effet de fondu. Il ne faut pas beaucoup de lignes de code, mais c’est efficace !