如何褪色 - 动画，并在标题/句子更改文本，文字 [英] How to fade - animate and change text, word in title / sentence

问题描述

我有一个非常简单的网站的问题。我有一个句子，其中一个字淡出，并通过在阵列另一个字替换。然而，自言都长短不一，句子宽度突然改变，它看起来波涛汹涌。我怎样才能动画的宽度？我尝试添加到CSS句子的容器的过渡，但没有奏效。我申请转型为 1.5s的所有线性，所以应该动画的宽度以及其他一切只要有变化。任何想法？

I have a very simple website problem. I have a sentence in which one word fades out, and is replaced by another word in an array. However, since the words all vary in length, the sentence width abruptly changes and it looks choppy. How can I animate the width? 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?

的jsfiddle

编辑：对不起，如果我不清楚，我只想要淡出这个词，而不是整个句子。我试图动画的宽度以适应新的单词。我不想改变/添加任何元素，只是在代替当前的标签解决。另外，从阵列拉出的对象必须是随机的。只是想思考一些有创意的脚本：）

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. Also, the objects pulled from the array need to be random. Just trying to think of some creative scripting :)

推荐答案

<一个href=\"http://jsbin.com/fade-animate-text-with-jQuery/\">http://jsbin.com/fade-animate-text-with-jQuery/

<p id="sentence">We provide <span id="swap"></span> for your business.</p>

CSS

#swap {
    vertical - align: top;
    width: 0;
    height: 3em;
 /* needed. px, em or any other */;
}

#swap > span {
    position: absolute;
}

jQuery的

var txt = ['code', 'solutions', 'design', 'awesomeness'],
    n = txt.length,
    $swap = $('#swap'),
    $span,
    c = -1;

// CREATE SPANS INSIDE SPAN
for(var i=0; i<txt.length; i++) $swap.append($('<span />',{text:txt[i]}));
// HIDE AND COLLECT THEM
$span = $("span", $swap).hide(); 

(function loop(){
    c = ++c % n;
    $swap.animate({width: $span.eq( c ).width() });
    $span.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop);
}()); 

这篇关于如何褪色 - 动画，并在标题/句子更改文本，文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！