Динамическая анимация обмена словами 3

Question

Следующее из предыдущего вопроса от 2011 года под названием «Динамическое переключение слов».

Благодаря ответу Марека я смог создать анимацию для текста на странице, которая каждые несколько секунд меняет одно слово с другим словом из списка. Однако, когда предыдущий вопрос/пример был следующим: «У меня есть заголовок, который гласит:« Это круто », но я хочу, чтобы« прохладно »заменялось каждые несколько секунд« опрятным/удивительным/groovy/etc ».

I нужно, чтобы мой заголовок сказал, например, (для продолжения) «Это классный человек». Проблема заключается в том, что, поскольку альтернативные слова длиннее, это заставляет предложение меняться по длине, когда оно вращается по каждому из слов. есть способ указать, используя Pure JS, для «человека», чтобы оставаться на заданном расстоянии от «есть», поэтому альтернативные слова заполняют промежуток между и общее предложение остается той же длины?

И, если выше возможно, могут ли альтернативные слова быть центрированы между «человеком» и «есть»?

Любая помощь очень ценится! Фил

The Pure JS я в настоящее время (из предыдущего поста упоминается) гласит:

<script> 
var words = ["neat", "great", "best", "groovy"]; 
var i = 0; 
var text = "This is cool"; 
function _getChangedText() { 
    i = (i + 1) % words.length; 
    console.log(words[i]); 
    return text.replace(/cool/, words[i]); 
} 
function _changeText() { 
    var txt = _getChangedText(); 
    console.log(txt); 
    $("#changer").text(txt); 
} 
setInterval("_changeText()", 1000); 
</script> 
<span id="changer">This is cool</span> 

Answer 1

Это больше HTML/CSS вещь ... однако, после того, как несколько модов:

http://jsfiddle.net/X3wZV/1/

var words = ["neat", "great", "best", "groovy"]; 
var i = 0; 
var text = "<span id='first'>This is</span> <span id='inner'>cool</span> <span id='sec'>man</span>"; 
function _getChangedText() { 
    i = (i + 1) % words.length; 
    console.log(words[i]); 
    return text.replace(/cool/, words[i]); 
} 
function _changeText() { 
    var txt = _getChangedText(); 
    console.log(txt); 
    $("#changer").html(txt); 
} 
setInterval("_changeText()", 1000); 

и немного стайлинга (проверка CSS, изменить его в соответствии с вашими потребностями). .. я думаю, что это близко к тому, что вы хотите, если я правильно понимаю ваш вопрос ... :)

Answer 2

Просто используйте 8-й индекс строки каждый раз, и добавьте человека после того, как новое слово.

Это вы имеете в виду?