如何褪色，动画和更改文本，标题/句子中的单词 [英] How to fade, animate and change text, word in title / sentence

问题描述

我有一个非常简单的网站问题。我有一个句子，其中一个字淡出，并被替换为数组中的另一个字。然而，由于这些词的长度都不同，句子宽度突然改变，并且看起来很乱。如何动画宽度？我尝试添加一个转换到css中的句子的容器，但没有工作。我应用的转换 1.5s所有线性，所以它应该是动画的宽度以及其他一切，只要有变化。任何想法？

JSFiddle

编辑：对不起，如果我不清楚，我只想淡出这个词，而不是整个句子。我试图动画的宽度适合新的单词。我不想改变/添加任何元素，只是用当前的标签解决。此外，从数组中拉出的对象需要是随机的。只是想想一些创意脚本：）

解决方案

  $（function（）{// DOM ready $（[data-words]）attr（data-words，function（i，d）{var $ self = $（this），$ word = d.split（|），tot = $ words.length，c = 0; // CREATE SPANS INSIDE SPAN for（var i = 0; i  

  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 = ：//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>我们提供< span data-words =code | solutions | design>< / span>为您的业务。< / p>< p>您订购了< span data-words =1 | 3 | 28>< / span> < b>大< / b> < span data-words =salad | macs | chips< / span>< / p>  
 
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

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




$(function() { // DOM ready

  $("[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;
    }());
    
  });

});

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>





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