Animar el cambio de ancho de palabras

Tengo una oración en la que una palabra se desvanece y es reemplazada por otra palabra en una matriz. Sin embargo, dado que las palabras varían en longitud, el ancho de la oración cambia abruptamente y se ve entrecortado.
¿Cómo puedo animar el ancho ? Traté de agregar una transición al contenedor de la oración en css pero eso no funcionó. Apliqué la transición como 1.5s all linear , por lo que debería animar el ancho y todo lo demás siempre que haya cambios. ¿Algunas ideas?

 $(function() { var hello = ['dynamic', 'a', 'aklsjdlfajklsdlkf', 'asdf']; var used = ['dynamic']; 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.html(item); greeting.animate({ "opacity": "1" }, 1500); } window.setInterval(function() { greeting.animate({ "opacity": "0" }, 1500); setTimeout(hey, 1500) }, 5000); }); 
 #sentence { transition: 1.5s all linear; } #what { font-style: italic; text-decoration: underline; color: red; } 
 

This is a sentence that has dynamic text that alters width.

EDIT: Perdón si no estaba claro, solo quiero desvanecer la palabra, no toda la oración. Intento animar el ancho para que se ajuste a la nueva palabra. No quiero cambiar / agregar ningún elemento, simplemente resuelva con las tags actuales en su lugar.

Fundido de texto animado con jQuery por Roko C.B.

 function dataWord () { $("[data-words]").attr("data-words", function(i, d){ var $self = $(this), $words = d.split("|"), tot = $words.length, c = 0; // CREATE SPANS INSIDE SPAN for(var i=0; i',{text:$words[i]})); // COLLECT WORDS AND HIDE $words = $self.find("span").hide(); // ANIMATE AND LOOP (function loop(){ $self.animate({ width: $words.eq( c ).width() }); $words.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop); c = ++c % tot; }()); }); } // dataWord(); // If you don't use external fonts use this on DOM ready; otherwise use: $(window).on("load", dataWord); 
 p{text-align: center;font-family: 'Open Sans Condensed', sans-serif;font-size: 2em;} /* WORDS SWAP */ [data-words]{ vertical-align: top; position: static; } [data-words] > span{ position: absolute; color: chocolate; } 
   

We provide for your business.

You ordered big

Cuando establece una nueva palabra para su oración, puede guardar #what width y luego hacer una animación con este ancho también. Me gusta esto:

 // 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(){ }); 

Pruebe esto: – http://jsfiddle.net/adiioo7/c8fFU/13/

Puedes actualizar el efecto de la oración dependiendo de tu requerimiento. Actualmente está usando 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); }); 

No para alardear pero …

El mejor que verás

CSS:

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

HTML:

 hello this is a sentence jupiter that changes like this: 

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); }); 

He tenido el mismo problema y fui con un enfoque diferente, no se desvaneció, sino que escribí : demo jsfiddle

 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) } } 

Básicamente, inserta su nuevo texto en la página, con un buen símbolo de intercalación y un error tipográfico para que parezca que alguien está tipeando.