Affichage séquentiel d'une liste de textes avec effet de fondu entrant et sortant

Question

J'aimerais afficher la liste suivante de textes dans un ordre séquentiel, avec un effet de fondu enchaîné, et éventuellement afficher l'image et y faire un arrêt. J'aimerais aussi afficher tous ces textes au centre.

<div>a<div> 
<div>b</div> 
<div>c</div> 
<div>d</div> 
<div><img src="mypict.jpg" alt="my pict" /></div> 

C'est tout ce que j'ai pour la page, je veux en faire une page d'introduction. Je sais que jquery a fadein() et fadeout(), et j'ai essayé le plugin innerfade. Mais il place toujours le texte sur la gauche et il boucle à l'infini.

Answer 1

Donnez la dernière div contenant l'image d'une classe de « dernier »:

<div class="last"><img src="mypict.jpg" alt="my pict" /></div> 

$('div').each(function(){ 
    $(this).fadeIn('slow'); 

    if(!$(this).hasClass('last')){ 
     $(this).fadeOut('slow'); 
    } 
}); 

Vous pouvez également SetTimeouts ou les fonctions de rappel au sein de la fadeIn et de fadeOut si vous voulez que quelque chose arrive par la suite.

Answer 2

Quasiment copie-collé de cette page, à old.nabble.com

$(function() { 
    var $sequence = $('div').hide(), div = 0; 
    (function(){ 
     $($sequence[div++]).fadeIn('slow', arguments.callee); 
    })(); 
}); 

Utilisez CSS pour positionner les divs dans le centre (horizontalement):

div {margin: 0 auto; largeur: 50%; text-align: centre; }

Width est défini car un élément de bloc - le div - prendrait autrement l'intégralité de l'espace horizontal. Le text-align: center; est si vous voulez que le texte soit centré dans les divs.