jQuery 文本动画 - 文本淡入

Question

我正在寻找使用 jQuery 为文本添加动画效果的方法。

我想显示“正在登录...”消息，其中在页面加载时应隐藏 3 个点，并且每隔 300 毫秒后 1 个点变得可见。这些一起应该创建动画。

是否创建了任何 jQuery 函数来执行此操作，否则我必须纠正自己的函数？

非常感谢任何建议。

Answer 1

使用 jQuery 插件可以很好地完成此操作。这使得它可重用且可配置。

这样的事情很简单。它有 3 个默认值，可以覆盖

• 文本默认为“正在加载”
• numDots 循环回零之前要计数的点数，默认为 3

• 延迟添加新点之间的延迟。默认为 300ms

  (function($) {
  
  $.fn.elipsesAnimation = function(options) {
  
      var settings = $.extend({}, { //defaults
          text: 'Loading',
          numDots: 3,
          delay: 300
      }, options);
      var currentText = "";
      var currentDots = 0;
      return this.each(function() {
          var $this = $(this);
          currentText = settings.text;
          $this.html(currentText);
          setTimeout(function() {
              addDots($this);
          }, settings.delay);
      });
  
      function addDots($elem) {
          if (currentDots >= settings.numDots) {
              currentDots = 0;
              currentText = settings.text;
          }
          currentText += ".";
          currentDots++;
          $elem.html(currentText);
          setTimeout(function() {
              addDots($elem);
          }, settings.delay);
      }
  }
  
  })(jQuery);
  

用法可以是

// Writes "Hello World", counts  up to 10 dots with a 0.5second delay
$('#testDiv').elipsesAnimation ({text:"Hello World",numDots:10,delay:500});

还有一个实例:http://jsfiddle.net/6bbKk/