动画改变字宽

Posted 2023-03-05

【中文标题】动画改变字宽

【英文标题】：Animate changing words width

【发布时间】：2014-01-08 20:36:21

【问题描述】：

我有一个句子，我淡入一个单词并用数组中的另一个替换它。但是，由于单词的长度都不同，因此句子宽度会突然变化，从而导致过渡不连贯。如何为宽度变化设置动画？我尝试在 css 中向句子的容器添加过渡，但这没有用。我将过渡应用为1.5s all linear，因此只要有变化，它应该为宽度以及其他所有内容设置动画。有什么想法吗？

$(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>

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

【问题讨论】：

Css 动画不会为未声明的值设置动画......就像自动宽度到自动宽度......只有当它设置为精确值......就像你有 100 并更改这个值一样，它将动画变化

所以你可以这样做。通过脚本设置现有单词的宽度。然后在更改之前测量新的单词宽度（有很多不同的方法）并设置不透明度......

【参考方案1】：

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);

ptext-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>

【讨论】：

这确实有效，但是额外的 $ 是怎么回事？那是 jQuery 吗？我从没见过变量名前有 $ ，那是什么目的？

@JosueEspinosa 这是我们用来指示此变量是对 HTMLElement 对象的引用的常用方法。使代码更容易阅读。想象一下你有var width = $('#width')，而不是在第200 行的某个地方你读到width，你可能会认为这是一个数字。更容易在代码中进一步阅读像$width 这样的变量 - 非常清楚它是关于一个元素的。 :)

演示在 Chrome 33 中似乎已损坏。

@Limestone 很有趣，我第一次访问演示链接时才出现问题。没有其他时间。我修改了对 .show... 内部回调的调用的任何方式都应该有所帮助。

@RokoC.Buljan 我必须承认我没有尝试任何其他浏览器或在页面不起作用时刷新页面。无论哪种方式，它现在看起来都在工作。谢谢！

【参考方案2】：

当你为你的句子设置新单词时，你可以保存#what width，然后也可以用这个宽度制作动画。像这样：

// declare as global variable and update when you set new word
var width = greeting.css('width'); 
// animation
greeting.animate(
            "opacity": "0", "width": width
        , 1500, function()
        );

【参考方案3】：

我遇到了同样的问题并采用了不同的方法，不是褪色而是打字：jsfiddle demo

function type($el, text, position) 
    if (text.length >= position) 
        var rchars = 'qbvol'; // typo chars
        if (position % 3 == 0 && Math.random() > .85)  // insert typo!
            var typo;
            var chr = text.substr(position, 1);
            if (chr == chr.toUpperCase())  typo = chr.toLowerCase(); 
            else  typo = rchars.substr(Math.floor(Math.random() * rchars.length), 1); 
            $el.text(text.substring(0, position - 1) + typo + '_');
            setTimeout(function()  type($el, text, position - 1); , 200)
        
        else 
            $el.text(text.substring(0, position) + '_');
            setTimeout(function()  type($el, text, position + 1); , 150)
        
    
    else 
        setTimeout(function()  $el.text(text); , 400)
    

它基本上是在页面上插入您的新文本，并带有一个很好的插入符号和错字，使其看起来像是有人在输入它。

【讨论】：

这可能更适合像***.com/questions/13325008/…这样的打字机问题：)

你是对的，但它也是一个很好的改变句子文本的动画，但也许它应该运行得更快一点，没有错字和插入符号

【参考方案4】：

试试这个：- http://jsfiddle.net/adiioo7/c8fFU/13/

您可以根据需要更新句子效果。目前它正在使用淡入/淡出。

JS：-

$(function () 
    var hello = ['jupiter', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
    var used = ['jupiter'];
    var greeting = $('#what');
    var item;
    var sentence = $('#sentence');

    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);

        sentence.fadeIn(1500);
    

    window.setInterval(function () 
        sentence.fadeOut(1500);
        greeting.animate(
            "opacity": "0"
        , 1500);
        setTimeout(hey, 1500);
    , 5000);

);