Fondu enchaîné pour les éléments de texte en ligne avec jQuery

Je cherche un moyen de bien animer / fondre les éléments d’ancrage en ligne avec jQuery. Il existe plusieurs solutions pour les éléments de bloc, mais rien jusqu’à présent pour les éléments en-ligne.

Mon texte alternatif pour chaque mot provient d’un atsortingbut dans l’élément:

word 

Mais si j’essaye de m’effacer, remplace le texte et disparaît, comme ici:

 jQuery(document).ready(function($) { $('a').click(function(index) { $(this).fadeOut(500, function() { $(this).text($(this).attr("data-r")); }); $(this).fadeIn(500); }); });​ 

Je ne reçois pas l’effet de fondu enchaîné que je voudrais, mais un fondu enchaîné suivi d’un fondu, comme vous pouvez le voir dans cette démo .

Je serais très reconnaissant pour les conseils que vous pourriez avoir.

Voici ce que je suis venu avec:

 $('a').click(function(index) { var clone = $(this).clone(); clone.css('position', 'absolute'); clone.css('left', $(this).position().left); clone.css('top', $(this).position().top); $('body').append(clone); $(this).hide(); $(this).text($(this).attr("data-r")); clone.fadeOut(500, function() { clone.remove(); }); $(this).fadeIn(500); }); 
 a { font-size: 60px; } 
  

word
word