JavaScript - 如何动画动画替换字的宽度变化在句子中间 [英] JavaScript - How to animate width change of substituted words mid-sentence

问题描述

我有一个句子，其中一个单词淡出，并被一个数组中的另一个单词替换。然而，由于这些单词的长度各不相同，因此句子宽度突然变化并且看起来不连贯。我如何动画宽度？我尝试添加到CSS的句子容器的过渡，但没有奏效。我将转换作为 1.5s应用于所有线性，因此它应该在宽度以及其他任何变化时动画。任何想法？

JSFiddle

编辑：对不起，如果我不清楚，我只想淡出这个词，而不是整个句子。我正在尝试动画宽度以适应新单词。我不想更改/添加任何元素，只需使用当前的标签即可解决问题。

解决方案

  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]}））; //收集单词和隐藏$ words = $ self.find（span）。hide（）; // （）函数loop（）{$ self.animate（{width：$ words.eq（c）.width（）}）; $ words.stop（）。fadeOut（）。eq（c）.fadeIn（） .delay（1000）.show（0，loop）; c = ++ c％tot;}（） ）;}）;} // dataWord（）; //如果您不使用外部字体，请在DOM上使用此功能;否则使用：$（window）.on（load，dataWord）;  

  p {text-align：center; font-family：'Open Sans Condensed'，sans-serif; font-size：2em;} / * WORDS SWAP * / [data-words] {vertical-align：最佳; 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>我们提供< span data-words =code | solutions | design>< / span>为您的企业。< / p>< p>您订购< span data-words =1 | 3 | 28>< / span> < b取代;大< / B个< span span data-words =salad | macs | chips>< / span>< / p>

p>

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.

解决方案

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>

这篇关于JavaScript - 如何动画动画替换字的宽度变化在句子中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！