Animate changing words width
animation, css, html, javascript, jquery
Solution
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<tot; i++) $self.append($('<span/>',{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;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
We provide
<span data-words="code|solutions|design"></span>
for your business.
</p>
<p>
You ordered
<span data-words="1|3|28"></span>
<b>big</b>
<span data-words="salad|macs|chips"></span>
</p>
Problem
I have a sentence where I fade in one word and replace it with another from an array. However, since the words all vary in length, the sentence width abruptly changes and it results in a choppy transition. How can I animate the width change? I tried adding a transition to the container of the sentence in css but that didn't work. I applied the transition as `1.5s all linear`, so it should be animating the width as well as everything else whenever there is change. Any 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; } ``` ``` <p id="sentence"> This is a sentence that has <span id="what">dynamic</span> text that alters width. </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> ``` EDIT: Sorry if I was unclear, I only want to fade out the word, not the entire sentence. I'm trying to animate the width to fit the new word. I don't want to change/add any elements, just solve with the current tags in place.