[Résolu] Texte changeant en fade..

Bonjour a tous j'ai un souci de code j'ai essayer de développer un code pour que deux mot change dans une phrases mais il se passe un truc bizarre. Je n'ai pas changer toute la phrases directement car comme les mots n'ont pas la même taille cela n'est pas très beau.. j'ai développé ca sur Jsfiddle.. le probleme c'est que toute la phrase bouge je suis un peu perdu...

Merci pour votre aide

Voici les codes

<table>
    <tr>
        <td width="100" align="right">texte immobile</td>
        <td width="60" align="center">
            <div id="container">
                <p>texte mobile</p>
            <p>texte remplacement</p>
        </div>
        </td>
        <td width="100">texte immobile </td>
        <td width="60">
            <div id="container2">
                <p>texte mobile2</p>
                <p>texte remplacement2</p>
            </div>
        </td>
    </tr>
</table>

$('#container p:gt(0)').hide();
setInterval(function(){
    $('#container p:first-child').fadeOut('slow')
     .next('p').fadeIn('slow')
     .end().appendTo('#container');}, 
     4000);

$('#container2 p:gt(0)').hide();
setInterval(function(){
    $('#container2 p:first-child').fadeOut('slow')
     .next('p').fadeIn('slow')
     .end().appendTo('#container2');}, 
     4000);

#container{position:relative;}
#container p{position:relative;)
#container2{position:relative;}
#container2 p{position:relative;)

Que veux-tu dire par "toute la phrase bouge" ? Tu parles des "soubresauts" dans l'animation ? Si c'est bien ça le problème, alors je te propose de tester ce JS :

$('#container p:gt(0)').hide();
setInterval(function(){
    $('#container p:first-child').fadeOut('slow', function() {
     $(this).next('p').fadeIn('slow').end().appendTo('#container'); }); }, 
     4000);
$('#container2 p:gt(0)').hide();
setInterval(function(){
    $('#container2 p:first-child').fadeOut('slow', function() {
     $(this).next('p').fadeIn('slow').end().appendTo('#container2'); });}, 
     4000);

L'idée, c'est de déclencher le fadeIn lorsque le fadeOut est achevé.
Modifié par petibato (01 Oct 2013 - 22:41)

Je vais essayer ton code. Merci!

Par contre ce n'est pas qu'un soubresaut la toute la phrase descend d'une ligne et remonte a chaque changement...

Mmmmeeeerrrrrrcccciiiiii!

Alors effectivement ça marche mieux. Par contre j'ai un petit souci je pense que j'ai fait une petite erreur car avant que le java ne se mettent en route les deux mots apparaissent et après c'est nickel..donc au chargement de la page on voit les deux mots et après l'animation se mets en route
Merci de m'aider je suis un peu perdu..

Je pense qu'en mettant des display:none sur les paragraphes en cause, ça devrait suffire.

je suis désolé je dois pas être doué car la tout disparait..

Vite fait :
CSS :

.cache {display:none;}

HTML :

<div id="container">
    <p>texte mobile</p>
    <p class="cache">texte remplacement</p>
</div>

Avec des nth-child dans le CSS ça serait sûrement plus classieux.

A priori ça fonctionne!!! Trop fort.

Merci beaucoup!