Question

我正在寻找某种淡入效果，使用Javascript，Jquery或者只是CSS，我的文本将从非常小的开始，然后慢慢放大直到达到最终的字体大小（在一段时间内）我指定）。我尝试每十分之一秒手动更改字体大小，但我确信有一种比这更简单的方法。

有什么建议吗？

Answer 1

jQuery-UI和CSS让它变得简单。这是一个小小的演示，它使文本字体大小增加到5x大小5000ms（5秒），使用缓动使其更加流畅。我还将动画速率降低到默认值的一半以下（这将是帧速率的两倍以上）。

<html lang="en">
<head>
  <title>jQuery UI is Fun!</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
    #element { font-size: 1.0em; }
  </style>

  <script>
  jQuery.fx.interval = 5;
  $(function() {
    $( "#element" ).animate({
          "font-size": "5.0em"
        }, 5000, "easeOutQuint" );
  });
  </script>
</head>
<body>
   <div id="element">This is my sample text.</div>
</body>
</html>

您可以在此处详细了解动画功能： http://jqueryui.com/animate/

Answer 2

我强烈推荐使用GreenSock JS作为处理任何HTML DOM元素动画的非常简单的方法。

JavaScript代码或文件中非常简单但有效的动画代码行示例如下：

TweenLite.from("#myTextElement", 1, {scaleX: 0.1, scaleY: 0.1, alpha: 0});

上面的示例 - 超过一秒 - 动画#myTextElement（可以是大多数ID为“myTextElement”的元素），从10％的比例到现有的比例CSS值，以及从0开始的alpha ％到现有的不透明度CSS值。

相反，使用 TweenLite.to 会产生相反的效果。

Javascript扩展文本淡入

2 个答案: