Question

I looking for way to animate text with jQuery.

I want to display ‘logging in…’ message where 3 dots should be hidden on page load and after every lets say 300ms 1 dot to become visible. Which all together should create animation.

Is there any jQuery function created to do exact that or I will have to right my own?

Any suggestions much appreciated.

Answer 1

This can be done rather nicely with a jQuery plugin. This makes it re-usable and configurable.

Something like this is simple enough. It has 3 defaults, which can be overriden

• text defaulted to “Loading”
• numDots the number of dots to count up to before recycling back to zero, defaults to 3

• delay the delay inbetween adding new dots. defaults to 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);
  

Usage could then be

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

And a live example: http://jsfiddle.net/6bbKk/