jQuery fondu / transition d'un texte à un autre?

Question

jQuery peut évidemment fadeIn / fadeOut texte facilement. Mais que faire si vous voulez changer le texte d'une chose à une autre? Cela peut-il arriver avec une transition?

Exemple:

 <div id='container'>Hello</div>
 

Peut-on changer le texte Hello to World mais le faire changer avec une transition (comme un fondu ou un effet) au lieu de changer instantanément?

Answer 1

Vous pouvez utilisez des rappels, comme ceci:

$("#container").fadeOut(function() {
  $(this).text("World").fadeIn();
});

Vous pouvez l'essayer ici, ou à cause de la file d'attente fonctionne dans ce cas particulier, comme ceci:

$("#container").fadeOut(function() {
  $(this).text("World")
}).fadeIn();

Cela exécute la .text() appel lorsque l' .fadeOut() est complet, juste avant de disparaître à nouveau.

Answer 2

Si vous utilisez hide / show ou fadeIn / fadeOut, vous pouvez rencontrer un effet de "saut", car cela change la propriété d'affichage CSS. Je suggère d'utiliser l'animation avec opacité.

Comme ça:

 $('#container').animate({'opacity': 0}, 1000, function () {
    $(this).text('new text');
}).animate({'opacity': 1}, 1000);
 

Answer 3

Voici un exemple en direct .

 (function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

})();
 

Ça marche bien.

Answer 4

une façon de penser à cela est d'avoir des éléments enfants avec du texte et de n'en montrer qu'un pour commencer, puis de fondre les autres l'un après l'autre.

jetez un oeil ici: http://jsfiddle.net/VU4CQ/

Answer 5

En utilisant des recherches de tableau pour le changement de texte et de couleur, la vitesse de transition et le centre de la souris, les événements de déplacement de souris dans ce menu comme ceci:

 $('#id a').mouseenter(function() {
    $(this).fadeOut(
    eSpeed, function() {
        $(this).text(sayThis[0]);
        $(this).css({
            color: eColor
        });
    }).fadeIn(eSpeed);
});


$('#id a').mouseleave(function() {
    $(this).fadeOut(
    eSpeed, function() {
        $(this).text(sayThat[0]);
        $(this).css({
            color: lColor
        });
    }).fadeIn(eSpeed);
});