JavaScript - Comment animer le changement de largeur des mots substitués à mi-phrase

J'ai une phrase dans laquelle un mot disparaît et est remplacé par un autre mot dans un tableau. Toutefois, étant donné que les termes varient en longueur, la phrase de la largeur de change brusquement et il semble agitée. Comment puis-je animer la largeur? J'ai essayé d'ajouter une transition vers le conteneur de la phrase dans le css mais cela ne fonctionne pas. J'ai appliqué la transition 1.5s all linearde sorte qu'il devrait être de l'animation de la largeur ainsi que tout le reste à chaque fois qu'il y a du changement. Des idées?

JSFiddle

EDIT: Désolé si je n'était pas claire, je veux seulement de la fermeture de la parole, non pas l'ensemble de la phrase. Je suis en train d'animer la largeur pour s'adapter à la nouvelle version de word. Je ne veux pas changer/ajouter des éléments, tout résoudre avec les tags existants en place.

source d'informationauteur Josue Espinosa

  1. 2

    Lorsque vous définissez un nouveau mot de votre phrase, vous pouvez économiser de l' #quelle est la largeur, puis de faire une animation avec cette largeur de trop. Comme ceci:

    //declare as global variable and update when you set new word
var width = greeting.css('width'); 
//animation
greeting.animate({
            "opacity": "0", "width": width
        }, 1500, function(){
        });
  2. 0

    Essayez ceci:- http://jsfiddle.net/adiioo7/c8fFU/13/

    Vous pouvez mettre à jour la phrase effet en fonction de votre exigence. Actuellement, il est à l'aide de fadein/fadeout.

    JS:-

    $(function () {
    var hello = ['jupiter', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
    var used = ['jupiter'];
    var greeting = $('#what');
    var item;
    var sentence = $('#sentence');

    function hey() {
        item = hello[Math.floor(Math.random() * hello.length)];
        if (hello.length != used.length) {
            while (jQuery.inArray(item, used) != -1) {
                item = hello[Math.floor(Math.random() * hello.length)];
            }
            used.push(item);
        } else {
            used.length = 0;
            item = hello[Math.floor(Math.random() * hello.length)];
            used.push(item);
        }
        greeting.html(item);
        greeting.animate({
            "opacity": "1"
        }, 1500);

        sentence.fadeIn(1500);
    }

    window.setInterval(function () {
        sentence.fadeOut(1500);
        greeting.animate({
            "opacity": "0"
        }, 1500);
        setTimeout(hey, 1500);
    }, 5000);

});
  3. 0

    Pas me vanter mais...

    Meilleur vous verrez

    CSS:

    span {
    float: left;
}
#what {
    margin: 0 3px;
}

    HTML:

    <span class="cf">hello this is a sentence </span><span id="what" class="cf">jupiter</span><span class="cf"> that changes like this:</span>

    Javascript:

    $(function () {
    var hello = ['jupiter', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
    var used = ['jupiter'];
    var greeting = $('#what');
    var item;

    function hey() {

        item = hello[Math.floor(Math.random() * hello.length)];
        if (hello.length != used.length) {
            while (jQuery.inArray(item, used) != -1) {
                item = hello[Math.floor(Math.random() * hello.length)];
            }
            used.push(item);
        } else {
            used.length = 0;
            item = hello[Math.floor(Math.random() * hello.length)];
            used.push(item);
        }
        greeting.text(item);
        greeting.animate({
            "width": "toggle",
                "opacity": 1
        }, 1500);
    }

    window.setInterval(function () {
        greeting.animate({
            "width": "toggle",
                "opacity": 0
        }, {
            duration: 1500,
            complete: setTimeout(hey, 1500)
        });
    }, 5000);

});
  4. 0

    J'ai eu le même problème et je suis allé avec une approche différente, pas de décoloration, mais en tapant: jsfiddle démo

    function type($el, text, position) {
    if (text.length >= position) {
        var rchars = 'qbvol'; //typo chars
        if (position % 3 == 0 && Math.random() > .85) { //insert typo!
            var typo;
            var chr = text.substr(position, 1);
            if (chr == chr.toUpperCase()) { typo = chr.toLowerCase(); }
            else { typo = rchars.substr(Math.floor(Math.random() * rchars.length), 1); }
            $el.text(text.substring(0, position - 1) + typo + '_');
            setTimeout(function() { type($el, text, position - 1); }, 200)
        }
        else {
            $el.text(text.substring(0, position) + '_');
            setTimeout(function() { type($el, text, position + 1); }, 150)
        }
    }
    else {
        setTimeout(function() { $el.text(text); }, 400)
    }
}

    Essentiellement, il insère votre nouveau texte sur la page, avec un joli accent circonflexe et la typo pour la faire ressembler à quelqu'un est en train de taper.